Блог

Главная - Вопросы по программированию - Вертикальное центрирование фрагмента текста внутри div

Вертикальное центрирование фрагмента текста внутри div

#html #css #alignment #vertical-alignment

#HTML #css #выравнивание #выравнивание по вертикали

Вопрос:

Я видел множество советов о том, как это сделать, но ни один из них не работает для меня. Я пытаюсь центрировать свое имя внутри div (идентифицируется как «.banner»).

Вот код:

 //html///////////////////////////////////
<div class="banner">
    <p>Jake Demian_</p>
</div>


//css////////////////////////////////////
.banner
{
    width: 100%;
    height: 400px;
    background-color: #e8bc23;
    text-align: center;
}

.banner p
{
    display: inline-block;
    font-family: "courier new";
    margin: 0 0;
    height: 100%;
    vertical-align: middle;
}

jsfiddle link: привязка

Извините за минимальную информацию. Я перепробовал все комбинации inline-block , vertical-align: middle , height 100% , margin: auto ,, о которых только мог подумать.

Ответ №1:

Попробуйте добавить:

 top:45%;
position:relative;

Для .banner p .

Вы также можете попробовать добавить:

 display: table;

для .banner и

 display: table-cell;

Для .banner p .

JSFiddle:http://jsfiddle.net/BTjr7/2 /