Как выравнивать текст по вертикали с помощью CSS?

Question

<div style='height:200px;'> 
SOME TEXT 
</div> 

Как выровнять «НЕКОТОРЫЙ ТЕКСТ» в нижней части div с помощью CSS без дополнения?

Answer 1

Абсолютный самый простой способ, хотя и не-точно, используя ваш пример кода будет:

div {height: 400px; 
    width: 50%; 
    margin: 0 auto; 
    background-color: #ffa; 
    position: relative; 
    } 

div p {position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    } 

HTML

<div id="container"> 
<p>SOME TEXT</p> 
</div> 

Оберните текст в элементе, что угодно, от <p>, <span>, <div> ... что угодно, и расположите этот элемент в нижней части контейнера.

Answer 2

Вы не можете сделать это простым способом, по крайней мере, не перекрещивать браузер.
Вы можете использовать дисплей: table; vertical-align: center;
Вы можете использовать выражения JS/CSS.
Вы можете иметь другой элемент внутри DIV, и положение его абсолютно по отношению к DIV:

<div style='position:relative;'> 
    <div style='position: absolute; bottom:0;> 
      My Text 
    </div> 
</div> 

Но на самом деле, так же, как я не хочу сказать, таблицы является ПОЦЕЛУЙ здесь (если вам нужно чтобы проверить его).

Answer 3

TDs могут вертикально выравнивать текст с вертикальным выравниванием, но это не работает на DIV. Не рекомендуется использовать стиль для вертикального выравнивания элементов.

Вы не можете выравнивать по вертикали текст внутри DIV с помощью CSS. Вы можете использовать только прописку, маржу или абсолютное и фиксированное позиционирование для выравнивания текста по вертикали.

Если вы используете абсолютное позиционирование хорошо, вы можете вертикально выровнять текст, вертикально выравнивая контейнер, в котором находится текст. Однако абсолютно позиционированные элементы не занимают «пространство» внутри своего контейнера, что означает, что вам нужно установить маржа или отступы, чтобы компенсировать это пространство в контейнере.

Например:

HTML:

<div id="container"> 
    <span id="text">Some text, Some text, Some text, </span> 
</div> 

CSS:

#id { 
    position:relative; 
    margin-bottom: 100px; 
} 

#text { 
    position:absolute; 
    bottom:0; 
    height: 100px; 
    overflow:hidden; 
} 

Answer 4

идентификатор {

display:table-cell; 
vertical-align:bottom; 
}