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 :

enter image description here

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

Popular posts from this blog

php - How to add and update images or image url in Volusion using Volusion API -

Laravel mail error `Swift_TransportException in StreamBuffer.php line 269: Connection could not be established with host smtp.gmail.com [ #0]` -

C#.NET Oracle.ManagedDataAccess ConfigSchema.xsd -