如何在css中对齐背景图像的文本中间部分

时间:2014-04-01 08:31:52

标签: css

我想在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;
 }

请给出解决方案。非常感谢提前

3 个答案:

答案 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属性。