Как выровнять текст по вертикали, используя 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

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

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

Answer 3

TD могут вертикально выравнивать текст с вертикальным выравниванием, но это не работает на 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

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

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

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