Hi,
ich versuche jetzt schon seit Stunden folgendes Problem zu lösen und schaff es einfach nicht :-(
Ich möchte gern ein Textfeld nicht nur horizontal zentriert (text-align:center), sonder auch vertikal zentriert (valign:middle) platzieren.
Das Horizontale funktioniert, aber das Vertikale nicht. Sprich, der Text ist immer im Browser ganz oben zentriert und nicht genau in Bildschirmmitte.
HTML:
CSS:
Danke!!! :-)
ich versuche jetzt schon seit Stunden folgendes Problem zu lösen und schaff es einfach nicht :-(
Ich möchte gern ein Textfeld nicht nur horizontal zentriert (text-align:center), sonder auch vertikal zentriert (valign:middle) platzieren.
Das Horizontale funktioniert, aber das Vertikale nicht. Sprich, der Text ist immer im Browser ganz oben zentriert und nicht genau in Bildschirmmitte.
HTML:
Code:
<!doctype html>
<html lang="de">
<head>
<title>Title</title>
<link rel="stylesheet" href="intro.css" type="text/css" media="screen" />
</head>
<body style="text-align:center; valign:middle">
<div class="infobox-container">
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="infobox">
<h3><span>Title</span></h3>
<p>This is the content of the infobox.</p>
</div>
</div>
</body>
</html>CSS:
Code:
.infobox-container {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
width: auto;
}
.infobox {
width: 250px;
background: #424242;
padding: 10px 5px 5px 5px;
margin:10px;
color: #fff;
font-size: 90%;
}
.infobox h3 {
background: #3198dd;
width: 270px;
color: #fff;
padding: 10px 5px;
margin: 0;
font-size: 160%;
text-align: center;
font-weight: bold;
}
.infobox h3 {
position: relative;
left: -15px;
}
.infobox-container .triangle-l {
border-color: transparent #2083c2 transparent transparent;
border-style:solid;
border-width:13px;
height:0;
width:0;
}
.infobox-container .triangle-r {
border-color: transparent transparent transparent #2083c2;
border-style:solid;
border-width:13px;
height:0;
width:0;
}
.infobox-container .triangle-l {
position: absolute;
left: -12px;
top: 45px;
}
.infobox-container .triangle-r {
position: absolute;
left: 266px;
top: 45px;
}
.infobox {
position: relative;
z-index: 90;
}
.infobox h3 {
position: relative;
z-index: 100;
}
.infobox-container .triangle-l {
z-index: 0; /* displayed under the infobox */
}
.infobox-container .triangle-r {
z-index: 0; /* displayed under the infobox */
}
.infobox {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
}
.infobox h3 {
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
text-shadow: #2187c8 0 -1px 1px;
}
.infobox a {
color: #35b0ff;
text-decoration: none;
border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
text-decoration: none;
border-bottom: 1px dotted #35b0ff;
}Danke!!! :-)
