html - Align hr vertically behind div with text -
i trying create banner/tittle have line behind main div. want line , text of tittle in middle (vertically) shown :
the problem if change size of browser, hr
, text not aligned (vertically). below first version :
.section { clear: both; padding: 0px; margin: 0px; } .col { text-align:center; display: block; float:left; margin: 1% 0 1% 0%; } .col:first-child { margin-left: 0; } .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; /* ie 6/7 */ } .span_3_of_3 { width: 100%; } .span_2_of_3 { width: 66.66%; } .span_1_of_3 { width: 33.33%; } @media screen , (max-width: 480px) { .col { margin: 1% 0 1% 0%; } .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } } #middle { background:#ccc; color:#fc3699; height:100px; margin-top:0; line-height:100px; } hr { margin-top:40px; border:2px solid #fc3699; }
<div class="section group"> <div class="col span_1_of_3"> <div class="topsection"> <div class="header"><hr /></div> </div> </div> <div id="middle" class="col span_1_of_3"> aaaaaaa </div> <div class="col span_1_of_3"> <div class="topsection"> <div class="header"><hr /></div> </div> </div> </div>
and here second version. instead of having 3 columns use snippet below. problem in line :
height:100px; line-height: 100px;
where want height 100%. line-height cannot:
.main { height:100%; min-height:100px; display: block; text-align: center; overflow: hidden; white-space: nowrap; } .main > span { width:200px; height:100px; line-height: 100px; background:#f1f1f1; position: relative; display: inline-block; } .main > span:before, .main > span:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 3px; background: #fc3699; } .main > span:before { right: 100%; margin-right: 15px; } .main > span:after { left: 100%; margin-left: 15px; }
<div class="main"> <span style="vertical-align: middle;">text</span> </div>
here third , best version have text-aling:center;
text. if add in css, not work reason:
.main { height:100%; min-height:100px; display: block; text-align: center; overflow: hidden; white-space: nowrap; } .main > span { width:200px; height:100px; line-height: 100px; background:#f1f1f1; position: relative; display: inline-block; } .main > span:before, .main > span:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 3px; background: #fc3699; } .main > span:before { right: 100%; } .main > span:after { left: 100%; } #child { display: table-cell; vertical-align: middle; }
<div class="main"> <span><div id="child">text</div></span> </div>
if flexbox
option, easy - have give
display: flex; justify-content:center; align-items:center;
and can away positioning , width calculations - see demo below:
.main { height: 100%; min-height: 100px; display: flex; justify-content:center; align-items:center; width: 100%; text-align: center; white-space: nowrap; } .main > span { width: 200px; height: 100px; background: #f1f1f1; display: inline-flex; justify-content:center; align-items:center; } .main:before, .main:after { content: ""; height: 3px; background: #fc3699; flex:1; }
<div class="main"> <span>text</span> </div>
Comments
Post a Comment