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
Post a Comment