如何在 CSS 中垂直居中图像和文本
[英] How to Vertically center images and text in CSS
本文介绍了如何在 CSS 中垂直居中图像和文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在这里有这个小提琴，我想将标题中的文本垂直居中，页脚中的图片和粘在标题上的中间图片......我不知道如何实现这一点，我已经尝试了一些东西，但无济于事.我希望在这里得到您的帮助 (=
jsfiddle 链接:http://jsfiddle.net/xF6xV/2/
HTML:
<div id="标题"><h1>测试文本，但它不在实际的 div 内...</h1>
<div id="内容"><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"/>
</br><div id="botcontent"><div class="slidercontainer"><div id="区域"><div id="旋钮"></div>
<div id="页脚"><img src="http://www.duv-ev.de/images/Leiste_Impressum_511x127_rgb-srgb_72.jpg"/>
CSS:
正文，html {高度:98%；}#header {高度:15.69%；背景颜色:灰色；行高:15.69%；}#header h1{文本对齐:居中；白颜色;垂直对齐:中间；}#内容{高度:71.16%；左:0;左边距:15%；右边距:15%；右:0;}#topcontent{高度:56.245%；}.slidercontainer{宽度:100%；}#botcontent{高度:43.755%；}图片{最大高度:100%；}#页脚{文本对齐:居中；背景颜色:灰色；高度:13.15%；}#剩下{向左飘浮;左边距:10%；最大宽度:30%；}#对{浮动:对；最大宽度:30%；边距:10%；}#中{显示:块；左边距:自动；右边距:自动；最大宽度:10%；}#区域 {背景:灰色；高度:6em；宽度:100%；边界半径:1em；}#旋钮{高度:6em；宽度:6em；背景:橙色；边界半径:1em；}
解决方案
我个人根据用途使用了 3 种方法.
FIDDLE
1) 翻译()
2) 行高
3) 垂直对齐
<img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg"/>
<div id="div2"><h1>你好</h1>
<div id="div3"><img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg"/>
<小时>
#div1, #div2, #div3 {显示:块；边距:20px 自动；宽度:400px；高度:200px；背景颜色:#ccc;文字对齐:居中；位置:相对；}#div1 img {高度:100px；位置:绝对；顶部:50%；左:50%；-webkit-transform:translateY(-50%) translateX(-50%);}#div2 h1 {行高:200px；}#div3 {显示:表格单元格；垂直对齐:中间；}#div3 img {高度: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.
FIDDLE
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屋！
查看全文
