HTML-текст в центре окна

-1

Я пытаюсь установить текст в центре окна, когда числа нет, а когда число присутствует, текст должен идти вверх и номер внизу.HTML-текст в центре окна

Я могу показать поле с цифрой правильно, но без номера окна вертикальное выравнивание не работает.

Я новый пчела HTML.

Может кто-нибудь помочь мне здесь? Я просмотрел различные статьи, и они указывают на использование ячейки таблицы и вертикального выравнивания в середине. Я тоже это пробовал, я думаю, что красная коробка не имеет текста посередине.

Вот пример.

http://jsfiddle.net/seohh5r1/2/

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.alignleft { 
    float: left;  
} 
.alignright { 
    float: right;  
} 
.even-boxes, 
.odd-boxes { 
    height : 52px; 
    width : 430px; 
    padding-left : 20px; 
    display : table-cell; 
    vertical-align : middle; 
} 

.odd-boxes { 
    background-color:#FFCCCC; 
} 

.even-boxes { 
    background-color:#CCEBFF; 
} 

.surname-entry { 
    font-size: 25px; 
    font-family:"Verdana"; 
} 

.name-entry { 
    font-size: 18px; 
    font-family:"Verdana"; 
} 

.another-entry { 
    font-size: 14px; 
    font-family:"Verdana"; 
} 

.number-entry { 
    font-size: 32px; 
    font-family:"Verdana"; 
} 

</style> 
</head> 
<body> 

<div class="odd-boxes"> 

    <div> 
    <span class="surname-entry">ABCDEFGH<span>,</span></span> 
    <span class="name-entry">&nbsp;PQRSTU</span> 
    <span class="number-entry alignright" style="margin-right:20px">K</span>  
    </div> 
</div> 
<div class="even-boxes"> 

    <div> 
    <span class="surname-entry">ABCDEFGH<span>,</span></span> 
    <span class="name-entry">&nbsp;PQRSTU</span> 
    <span class="number-entry alignright" style="margin-right:20px">K</span> 
    <div class="another-entry">[1234567890101]</div> 
    </div> 
</div> 
</body> 
</html>

источник

2015-06-17 Ajit

Смотрите эту ссылку, может быть полезно .... http://stackoverflow.com/questions/8865458/how-to-align-text- vertically-center-in-div-with-css –

-2

Я понял вас раньше, попробуйте это снова. Если вы пытаетесь вертикального выравнивания элементов

Пролет элемент должен быть выведен из иерархии родительского сНу

<div> 
    <span class="surname-entry">ABCDEFGH<span>,</span></span> 
    <span class="name-entry">&nbsp;PQRSTU</span> 
    <div class="another-entry">[1234567890101]</div> 
</div> 

<span class="number-entry">K</span>

Вы должны добавить в дополнительной CSS, решающая один дисплей: встроенный блок вертикально выровнять ваши внутренние элементы

.odd-boxes, .even-boxes{ 
    position:relative; 
} 

.odd-boxes>span, .even-boxes>span{ 
    position:absolute; 
    right:20px; 
    top:0; 
    bottom:0; 
    margin:auto; 
    vertical-align:middle; 
    height:39px;/*height need to be specified*/ 
}

Также я изменил некоторые из ваших CSS, вы можете обратиться к моей версии ниже:

http://codepen.io/vincentccw/pen/vOJVbX

источник

2015-06-17 03:40:44 Vincent1989

Он будет центрировать текст в поле, я не хочу этого. Я хочу, чтобы текст оставался выровненным, кроме «K» - – Ajit

. Он выглядит хорошо. Спасибо Винсент. К сожалению, у меня нет роскоши сохранять динамическую высоту ящиков, поскольку в столбце должно быть зафиксировано количество ящиков. Я собираюсь создать стек этих ящиков. :-( – Ajit

@ user3564816 вы можете просто добавить высоту в боксы, она должна исправить ее высоту. – Vincent1989

А вот еще один способ выравнивания текста по вертикали, это решение будет работать на одной линии и несколько строк текста, но по-прежнему требует фиксированной высоты контейнера:

<div> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> 
</div>

CSS-только подгоняет <div>, затем вертикально центрирует выравнивание <span>, устанавливая высоту линии <div>, равную ее высоте, и делая <span> встроенным блоком с вертикальным выравниванием: центром. Затем он устанавливает нормальную линию для строки <span>, поэтому ее содержимое будет естественно проходить внутри блока.

div { 
    width: 250px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; 
} 

span { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal;  
}

Demo Ссылка http://jsfiddle.net/CtH9k/

источник

2015-06-17 03:44:29

Я тоже посмотрел на эту ссылку, но если я поместил все блоки в одну строку, число тоже попадет в одну строку, я не хочу этого. Я хочу номер, как показано в JSFiddle. – Ajit

HTML-текст в центре окна

ответ

Смежные вопросы