Как вписать число в определенный div в CSS

Question

У меня есть следующая структура div

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

CSS определен как таковой

    .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;
    }

Проблема заключается в том, что при отображении четырехзначного числа, как в1007 * номер не вписывается в div.Если мы изменим размер шрифта, число вписывается в div, но тогда число не попадает в центр div.Вместо этого он идет в верхнюю позицию div.Прямо сейчас из-за размера шрифта число подходит к середине div, как требуется, но для четырехзначного числа оно не вписывается в div.Пожалуйста, помогите мне правильно отобразить четырехзначное число в середине div.

Answer 1

Увеличьте line-height. Вертикальное выравнивание основано на высоте строки текста. При уменьшении размера шрифта высота линии также уменьшается, если вы явно не установили высоту строки.

Вам также может понадобиться поместить его во встроенный элемент, например, в span, и установить vertical-align: middle.

Answer 2

переполнение: скрыто;?

Кроме того, я не вижу проблем: http://tinkerbin.com/ALhjdvPH

Answer 3

Изменить номер канала css.

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

http://jsfiddle.net/V2tdL/5/