Как я могу сделать свой текст в центре этого DIV как поэтическим, так и по горизонтали?

Мне нужно центрировать текст по вертикали и по горизонтали. Есть ли простой способ сделать это для следующего кода?

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

Ответ 1

Вы можете использовать свойство text-align, чтобы центрировать текст по горизонтали, и line-height, равный высоте div для центрирования встроенных элементов по вертикали.

<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>

Пример здесь.

Ответ 2

Другим способом сделать это, отличным от @Jose, является использование

display:table; и display:table-cell

как это

div{
    display:table; 
    height:125px;  //JUST FOR SHOW
    width:125px;   //JUST FOR SHOW
}

span{
    background-color: rgb(255, 0, 0);
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Затем vertical-align:middle; и text-align:center; выполните работу.

Пример: http://jsfiddle.net/jasongennaro/unfwL/1/