Как центрировать текст на div

Question

Я пытаюсь выровнять текст по горизонтали и по вертикали. Используя горизонтальную ось, я сделал:

text-align: center; 

И это сработало отлично. Но я хочу, чтобы текст также находился на вертикальной оси. Я прочитал много решений, но у каждого есть разные решения, и я немного запутался ...

http://jsfiddle.net/QLPTD/1/

спасибо!

Answer 1

Ну одна вещь, которую вы можете сделать, это

line-height: 25px; 

Вы не обеспечивают высоту, но вместо того, чтобы высота автоматически устанавливается. Вы можете попробовать это, он работает большую часть времени для меня.

Answer 2

У CSS есть свойство vertical-align, но использование его может быть немного сложным.

См. this page для получения дополнительной информации.

У меня есть внешний div, который имеет свойство display: table;, а затем внутренний стол display: table-cell;. Затем я смогу сделать vertical-align: middle; на внутреннем div. Все ваши стили применяются к внешнему div.

HTML

<div id="outer"> 
    <div id="menu_secciones" > 
      Hello! 
    </div> 
</div>​ 

CSS

#outer { 
    display: table; 
    background-color: #dddddd; 
    position: absolute; 
    left: 0; 
    height: 50%; 
    width: 100%; 
    top: 10%; 
} 
#menu_secciones 
{ 
    text-align: center; 
    display:table-cell; 
    vertical-align:middle; 
}​ 

DEMO

Answer 3

Вы можете рассмотреть возможность использования отступов в ваших интересах: http://jsfiddle.net/QLPTD/15/

До тех пор, пока ваш верхний слой и нижняя часть прокладки одинаковы, и вы соответственно настроили свой дисплей и высоту, ваш текст должен выглядеть вертикально по центру

Answer 4

Если вы хотите выровнять текст по вертикали, вы должны использовать тот же самый высота линии и высота.

http://jsfiddle.net/QLPTD/7/

Answer 5

высота линии только хорошее решение, если вы собираетесь только одну строку текста. Метод sachleen, упомянутый также является еще одним жизнеспособным вариантом. Другой способ, которым вы могли бы это сделать, - использовать абсолютное позиционирование ... Например,

<div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu massa nisi, pharetra elementum felis. Donec iaculis eros eu sapien pharetra tempor</p> 
</div> 


<style type="text/css"> 

    div { 
    width:300px; 
    height:300px; 
    border:1px solid red; 
} 

p { 
    display:block; 
    width:300px; 
    border:1px solid black; 
    position:absolute; 
    top:28%; 
    text-align:center; 
} 

</style> 

Верхний% будет варьироваться в зависимости от вашего содержимого.

http://jsfiddle.net/krishollenbeck/gHXf7/