如何在CSS中垂直居中图像和文本 [英] How to Vertically center images and text in CSS
本文介绍了如何在CSS中垂直居中图像和文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这个小提琴在这里，我想垂直居中的标题中的文本，页脚中的图片和中间的图片贴在标题...我不知道如何实现这一点，我已经尝试了一些东西，但无济于事。我希望你在这里的帮助SO（=
链接到jsfiddle： http://jsfiddle.net/xF6xV/2/
HTML：
< body>
< div id =header>
< h1>测试文字， < / h1>
< / div>
< div id =content>
< div id =topcontent>
< img src =http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpgid =left>
< img src =http：// www .curiousfix.com / wp-content / uploads / 2013/06 / only_god_forgives_xxlg-2000x2964.jpgid =right/>
< img src =http://typographica.org/wp-content /uploads/2009/04/Lakside-styles-315x165.pngid =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：
code> 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;
}
解决方案
1）translate（）
b$ b
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;
}
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;
}
这篇关于如何在CSS中垂直居中图像和文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
