Выровнять текст по вертикали

У меня проблема с вертикальным выравниванием текста с помощью CSS. Я пробовал, наверное, все, но он просто не хочет работать. Вы можете увидеть мою демоверсию jsfiddle здесь:

http://jsfiddle.net/zcU7M/7/

.section {
    text-align: center;
    vertical-align: middle;
    display:table-cell;
}

С этим кодом должно работать, но что-то не так.

Как я могу это исправить? Заранее спасибо.

EDIT: Обновленная демонстрация: http://jsfiddle.net/zcU7M/7/


text alignment css center
person Richard Mišenčík    schedule 23.11.2013    source источник
comment
Не избегайте требований использовать ссылку jsfiddle, добавляя ложный код, вместо этого вы должны просто опубликовать код.   -  person Josh Powell    schedule 23.11.2013
comment
@JoshPowell Хорошо, спасибо.   -  person Richard Mišenčík    schedule 23.11.2013

Ответы (5)


arrow_upward
1
arrow_downward

Напишите:

.section {
    display: table-cell;
    vertical-align:middle;
}

Обновлен скрипт.

person Hiral    schedule 23.11.2013
comment
Пожалуйста, проверьте мою обновленную демонстрацию: jsfiddle.net/zcU7M/7. Я включил загрузочные файлы css и js. У IM такая же проблема локально, текст не выровнен, но все застряло слева. - person Richard Mišenčík; 23.11.2013

arrow_upward
1
arrow_downward

.section нужен display: table-cell

.section {
    height: 200px;
    background:#ccc;
    border-bottom: 1px solid #dcdcdc;
    text-align: center;
    vertical-align: middle; 
    display:table-cell;
}

display:table-cell — это то, что позволяет элементу иметь дочерние элементы, выровненные по вертикали, поэтому он должен быть на родительском элементе, чтобы иметь возможность выровнять дочерние элементы по вертикали.

Вот рабочая демонстрация.

person Robbie Wxyz    schedule 23.11.2013
comment
Пожалуйста, проверьте мою обновленную демонстрацию: jsfiddle.net/zcU7M/7. Я включил загрузочные файлы css и js. У IM такая же проблема локально, текст не выровнен, но все застряло слева. - person Richard Mišenčík; 23.11.2013
comment
@RichardMišenčík : ??? Эта демонстрация выглядит так, как будто она работает правильно. Пожалуйста, объясните больше. Я хочу помочь. - person Robbie Wxyz; 23.11.2013
comment
Раздел не охватывает всю ширину. Он как бы застрял в левом боку. - person Richard Mišenčík; 23.11.2013
comment
Добавьте .container{width:auto;} в свой CSS. По какой-то причине вы bootstrap.min.css пытаетесь установить ширину .container на 1170px, и вам нужно переопределить это. См. этот обновленный JSFiddle. - person Robbie Wxyz; 23.11.2013
comment
ты уверен, что это нормально? Не сломает ли он какой-нибудь код где-то еще или что-то еще? Могу ли я как-то изменить разметку, чтобы это работало? - person Richard Mišenčík; 23.11.2013
comment
Вы можете поместить его как встроенный стиль. Похоже на этот JSFiddle. - person Robbie Wxyz; 24.11.2013
comment
давайте продолжим это обсуждение в чате - person Richard Mišenčík; 24.11.2013

arrow_upward
1
arrow_downward 

For a vertical paragraph align use that:

p { 
      height:200px;
      line-height:200px;
      text-align:center;
      vertical-align: middle; 
    }

Пример JSFiddle: Пример

person SavinienL    schedule 05.02.2014

arrow_upward
0
arrow_downward

Проблема в том, что тег ‹p› просто добавляет немного поля внизу. Вы можете увидеть это при проверке с помощью firebug. Просто добавьте margin: 0 к вашему селектору .section p:

.section p {
    font-size: 15px;
    font-family: Arial;
    font-style: italic;
    margin: 0;
}

http://jsfiddle.net/zcU7M/22/

person SuperNova    schedule 05.02.2014

arrow_upward
0
arrow_downward

вся заслуга принадлежит владельцу этой ссылки @Sebastian Ekström Link, пожалуйста, пройдите через это. увидеть его в действии codepen, прочитав статью выше, я создал демонстрацию fiddle также.

С помощью всего 3 строк CSS (исключая префиксы поставщиков) мы можем с помощью transform: translateY центрировать по вертикали все, что захотим, даже если мы не знаем его высоту.

Свойство CSS transform обычно используется для поворота и масштабирования элементов, но с его функцией translateY теперь мы можем выравнивать элементы по вертикали. Обычно это должно быть сделано с абсолютным позиционированием или установкой высоты строки, но для этого требуется, чтобы вы либо знали высоту элемента, либо работали только с однострочным текстом и т. д.

Итак, для этого пишем:

.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

Это все, что вам нужно. Это метод, аналогичный методу абсолютного положения, но с преимуществом в том, что нам не нужно устанавливать высоту элемента или свойство положения родителя. Он работает прямо из коробки, даже в IE9!

Чтобы сделать его еще более простым, мы можем написать его как миксин с его префиксами поставщиков:

person ankitd    schedule 11.08.2014