Using line-height to vertically center text within an inline-element is a technique I often employ.
Here's a demo I created:
body,
section {
width: 100%;
}
section {
background-color: lightGrey;
}
#wrap {
margin: 30px auto;
width: 100%;
max-width: 800px;
text-align: center;
height: 48px;
}
.my-element {
line-height: 48px;
}<section>
<div id="wrap">
<span class="my-element">My element</span>
</div>
</section>It works well, with the text perfectly centered vertically within the grey bar.
However, the drawback of this method is having to fix the parent-element's height.
Is there a more dynamic approach for achieving the same result?
An approach that won't break when the parent-element's height changes?