CSS центр текста на нескольких строках

Question

мне нужно применить некоторый текст в DIV по горизонтали и по вертикали, который работал отлично с этим решением, выложенных на переполнение стека и раньше -

text-align: center; 
vertical-align: middle; 
line-height: 90px; 

/* the same as your div height */ 

Моя проблема заключается в том, что я есть несколько строк, и я оборачивать слова на новую строку с -

white-space: normal; 

Мой текст внутри кнопки, так что я нужна эта линия, чтобы противодействовать класс БТН, который не позволит текста обернуть нормально.

Однако, когда я это сделаю, теперь будет огромный разрыв между моими линиями 90 пикселей, как и следовало ожидать. Есть ли способ обойти это? Или другой способ сосредоточить мой текст?

Answer 1

Использование Flexbox:

<div id="container"> 
<div class="content">Multi line content centered both vertically and horizontally. You can use block elements & images too.</div> 
</div> 

Css прост:

#container { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-align: center; 
-webkit-align-items: center; 
-ms-flex-align: center; 
align-items: center; 
height: 90px; 
-webkit-box-pack: center; 
-webkit-justify-content: center; 
-ms-flex-pack: center; 
justify-content: center; 
} 

Подробнее: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 2

Sans Flexbox подход:

Дайте ваш контейнер элемент в высоту строки равной до его известной высоты, а затем дать дочерний элемент, который содержит текст строки t 1 (или что угодно). Убедитесь в том, чтобы установить ребенка display: inline-block

div { height: 250px; line-height: 250px; border: 1px solid #000;} 
 
span { line-height:1; display: inline-block;}

<div> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at efficitur nulla. Suspendisse potenti. Ut viverra velit in lobortis euismod. Mauris cursus mollis porta. Praesent ullamcorper imperdiet placerat. Nam sit amet aliquam leo. Ut a facilisis ex, ut fermentum felis</span> 
 
</div>

Answer 3

таблиц CSS работают достаточно хорошо

div { 
 
    height: 250px; 
 
    border: 1px solid #000; 
 
    display: table; 
 
} 
 
p { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
}

<div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at efficitur nulla. Suspendisse potenti. Ut viverra velit in lobortis euismod. Mauris cursus mollis porta. Praesent ullamcorper imperdiet placerat. Nam sit amet aliquam leo. Ut a facilisis 
 
    ex, ut fermentum felis</p> 
 
</div>