CSS.Text, центрированный внутри DIV и выравнивание по вертикали

Question

Я хочу отобразить текст в нескольких строках внутри div. И я хочу, чтобы линии были горизонтально центрированы, и я получаю с помощью text-align:center в родительском div. Проблема в том, что я хочу, чтобы эти текстовые строки (содержащиеся в span) имели небольшое расстояние между линиями. Итак, для меня достаточно одного <br>. Я попытался установить margin и padding на <span> элементов, но безуспешно. Если я попытаюсь расположить их absolute, он не работает с горизонтальным alignment в родительском. Итак, как я могу использовать их по горизонтали и управлять пикселями, пробелы интерлайн?

Answer 1

Элементы Span являются встроенными по умолчанию, что означает, что поля и отступы не применяются. Либо используйте divs или сделайте это, а затем примените поля и/или дополнения.

div.myParentDivClass span {display: inline-block;} 

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

Answer 2

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

http://codepen.io/jonathan/pen/gntAq

<div> 
    <span class="text">My Text To Align Vertically</span> 
</div> 

в основном вы можете имитировать поведение таблицы с помощью CSS, как этот

div { 
    display: table; 
    text-align: center; 
    width: 300px; 
    height: 150px;   
} 

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

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align