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