Question

I need to center text vertically and horizontally. Is there a simple way to do this for the following code?

<div style="display: block; height: 25px;">
    <span id="ctl_txt" style="background-color: rgb(255, 0, 0);">
        Basic
    </span>
</div>

Answer 1

You can use the text-align property to center the text horizontally, and line-height equal to the div height to center inline elements vertically.

<div style="display: block; height: 25px; text-align:center; line-height:25px;">
    <span id="ctl_txt" style="background-color: rgb(255, 0, 0);">Basic</span>
</div>

Example here.