Question

我想垂直和水平地将我的文字“Subaru的新作品”中心化。另外，我在文字上有深蓝色背景。我希望深蓝色背景在整个div上水平延伸。我该怎么做？

的jsfiddle： http://jsfiddle.net/huskydawgs/eL7rwLx3/21/

HTML：

<div class="wrapper-promo">
<div class="title-top">
    <div class="title-top-cell">
        <h2 class="block-title">New from Subaru</h2></div></div>
    <div class="promo-content">
        <h2>
            Subaru Guide for Small Business</h2>
        <h3>
            Starts at $45/month</h3>
        <p>
            Adventure has a stylish side. The 2015 Subaru Outback was designed to allow you to experience the world like you never have before.</p>                
</div>
</div>

CSS： .wrapper-promo { background-color：＃3862ad; border：2px solid＃2251a4; 保证金：10px 0; 宽度：500px; }

.title-top {
    background-color: #2251a4;
    display: table;
    height: 40px;  
    overflow: hidden;
}


.title-top-cell {
    display: table-cell;
    vertical-align: middle;
}


.promo-content {
    margin: 20px;
}

h2 {
    font-family:SegoeBold;
    font-size:1.4em;
    color:#fff;
    margin: 10px 0 -10px 0;
}

h2.block-title {
    margin: 0;
    text-align: center;
}

h3 {
    font-family:SegoeBold;
    font-size:1em;
    color:#fff;
}
 .promo-content p {
     font-family: helvetica, Arial,sans-serif;
    font-size: 14px;
    color: #fff;
    line-height: 20px;
 }

Answer 1

如果你这样做，它将在你的title-pop div中一直延伸你的块标题div。

h2.block-title {
margin: 0 auto;
text-align: center;
width: 100%;
}

如何垂直居中文本并让整个屏幕显示深蓝色条

1 个答案: