css - Best approach of aligning text next to another element? -


well, when need align text next box, this: https://codepen.io/maartinshh/pen/ymdnrw , i've heard terrible mistake use paddings , margins kinda of job. there alternative?

<div class="box"></div> <div class="text">text</div>  .box{   background-color:blue;   width: 70px;   height: 70px; }  .text{   padding-left: 80px;    margin-top: -40px; } 

for example, change display type inline-block, , use vertical-align property center text.

.box {    background-color: blue;    width: 70px;    height: 70px;    display: inline-block;    vertical-align: middle;  }    .text {    display: inline-block;    vertical-align: middle;  }
<div class="box"></div>  <div class="text">text</div>

a second approach might using flexbox. can wrap both divs in container , apply flex properties it:

.wrap {    display: flex;    align-items: center;  }    .box {    background-color: blue;    width: 70px;    height: 70px;  }
<div class="wrap">    <div class="box"></div>    <div class="text">text</div>  </div>


Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -