To vertically center text in a span
element, you can use CSS flexbox. Here's an example:
<style>
.container {
display: flex;
align-items: center; /* vertically center items */
justify-content: center; /* horizontally center items */
height: 100px;
border: 1px solid black;
}
</style>
<div class="container">
<span>Vertically centered text</span>
</div>
In this example, we create a container div
with a height of 100px
and a border of 1px
to visualize the centering. We then use display: flex
to enable flexbox layout, and set align-items: center
to center items vertically and justify-content: center
to center items horizontally. Finally, we place the span
element inside the container.
This will vertically center the text in the span
element inside the container.