html - How do I vertically center text and have the dark blue bar go across the entire screen -


i'd vertically , horizontally center text "new subaru". also, have dark blue background on text. dark blue background extend horizontally on entire div. how that?

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 subaru</h2></div></div>     <div class="promo-content">         <h2>             subaru guide small business</h2>         <h3>             starts @ $45/month</h3>         <p>             adventure has stylish side. 2015 subaru outback designed allow experience world never have before.</p>                 </div> </div> 

css: .wrapper-promo { background-color: #3862ad; border: 2px solid #2251a4; margin: 10px 0; width: 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;  } 

if stretch out block title div way in title-pop div.

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

Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -