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:
[CODE]
TitleTitle
This is the content of the infobox.
[/CODE]
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;
}[/CODE]
Danke!!!