我想在css中将内容对齐背景图像的中间位置。 我使用了像
这样的代码 section.center_content {
background: url(../images/center_bg.jpg) center no-repeat;
border-bottom: 1px solid #e5e5e5;
font-family:Arial, Helvetica, sans-serif;
margin-bottom: 40px;
background-size:100%;
height:190px;
}
.ticker-content {
vertical-align:middle;
}
.ticker-content h1 {
color:#FFFFFF;
font-size:45px;
}
.ticker-content h2 {
color:#BFBFBF;
font-size:35px;
}
.ticker-content p {
color:#BFBFBF;
font-size:20px;
}
请给出解决方案。非常感谢提前
答案 0 :(得分:1)
将以下属性添加到section.center_content
:
section.center_content {
background:blue;
border-bottom: 1px solid #e5e5e5;
font-family:Arial, Helvetica, sans-serif;
margin-bottom: 40px;
height:190px;
width:100px;
/*Vertically center*/
display:table-cell; /*This makes the div behave like a table cell*/
vertical-align:middle; /*This property is only available on table cells*/
/*Horizontal center*/
text-align:center; /*This you know centers text horizontally*/
}
.ticker-content{
/*Remove vertical-align:middle; from here*/
}
<强> DEMO 强>
P.S。并保留此wonderful article以供将来参考。
答案 1 :(得分:0)
css属性vertical-align适用于内联元素和table-cell元素。
因此,在您的元素中添加一个display:table-cell,以便在中间对齐。
答案 2 :(得分:0)
您始终可以使用等于容器高度的line-height属性。