Question

I have the following div structure

<div class="channel_name">
   <div class="channel_number">2299</div>
</div>

The css is defined as such

    .channel_name {
        background: url("../img/desktop/logo_bg.png") no-repeat scroll 50% 50% transparent;
        display: table-cell;
        padding: 3px;
        text-align: center;
        vertical-align: middle;
        width: 45px;
    }

   .channel_number {
        background-color: #FFFFFF;
        color: #FF0000;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: bold;
        height: 21px;
        margin: auto;
        width: 33px;
    }

The problem is that when there is four digit number to be displayed as in the channel_number class the number does not fit within the div. If we change the font-size the number fits within the div but then the number does not come to the center of the div. Instead it goes to the top position of the div. Right now because of the font-size the number is coming to the middle of the div as desired but for the four digit number it does not fit within the div. Please help me to display four digit number properly in middle of div.

Answer 1

Increase the line-height. Vertical alignment is based on the height of a line of text. When you decrease the font size, the line height decreases as well, unless you have explicitly set the line height.

You may also need to place it in an inline element, like a span, and set vertical-align: middle.