更新时间:2022-11-02 12:17:39
1)translate()
b3)vertical-align
< div id =div1>
< img src =http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg/>
< / div>
< div id =div2>
< h1> Hello< / h1>
< / div>
< div id =div3>
< img src =http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg/>
< / div>
div1,#div2,#div3 {
display:block;
margin:20px auto;
width:400px;
height:200px;
background-color:#ccc;
text-align:center;
position:relative;
}
#div1 img {
height:100px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translateY(-50%)translateX(-50%);
}
#div2 h1 {
line-height:200px;
}
#div3 {
display:table-cell;
vertical-align:middle;
}
#div3 img {
height:100px;
}
I have this fiddle here and i want to vertically center the text in the header, the picture in the footer and the picture in the middle which is sticked to the header... I don'T know how to achieve this and i already tried out some things but to no avail. I'll hope for your help here SO (=
Link to the jsfiddle: http://jsfiddle.net/xF6xV/2/
HTML:
<body>
<div id="header">
<h1>Test Text but it's not inside the actual div...</h1>
</div>
<div id="content">
<div id="topcontent">
<img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg" id="left" >
<img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg" id="right"/>
<img src="http://typographica.org/wp-content/uploads/2009/04/Lakside-styles-315x165.png" id="mid" />
</div>
</br>
<div id="botcontent">
<div class="slidercontainer">
<div id="area">
<div id="knob"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<img src="http://www.duv-ev.de/images/Leiste_Impressum_511x127_rgb-srgb_72.jpg"/>
</div>
CSS:
body,
html {
height: 98%;
}
#header {
height: 15.69%;
background-color: gray;
line-height: 15.69%;
}
#header h1{
text-align: center;
color: white;
vertical-align: middle;
}
#content{
height: 71.16%;
left:0;
margin-left: 15%;
margin-right: 15%;
right:0;
}
#topcontent{
height:56.245%;
}
.slidercontainer{
width: 100%;
}
#botcontent{
height: 43.755%;
}
img {
max-height:100%;
}
#footer{
text-align: center;
background-color: gray;
height: 13.15%;
}
#left{
float:left;
margin-left: 10%;
max-width: 30%;
}
#right{
float: right;
max-width: 30%;
margin-right:10%;
}
#mid{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 10%;
}
#area {
background: gray;
height:6em;
width: 100%;
border-radius: 1em;
}
#knob {
height: 6em;
width: 6em;
background: orange;
border-radius: 1em;
}
Personally I use 3 methods depending upon the use.
1) translate()
2) line-height
3) vertical-align
<div id="div1">
<img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg"/>
</div>
<div id="div2">
<h1>Hello</h1>
</div>
<div id="div3">
<img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg"/>
</div>
#div1, #div2, #div3 {
display:block;
margin:20px auto;
width:400px;
height:200px;
background-color:#ccc;
text-align:center;
position:relative;
}
#div1 img {
height:100px;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translateY(-50%) translateX(-50%);
}
#div2 h1 {
line-height:200px;
}
#div3 {
display:table-cell;
vertical-align:middle;
}
#div3 img {
height:100px;
}