Как выравнивать текст в середине (по вертикали)

Я борюсь с этим много часов и все еще не могу найти решение. Я сделал эту хорошую сетку, которая настраивается с длиной текста и изменением браузера. Теперь проблема заключается в том, что я не могу получить текст в середине поля.Как выравнивать текст в середине (по вертикали)

Я пробовал все. Я использовал несколько свойств, чтобы достичь этого, но ничего не получилось.

text-align: center; 
vertical-align: middle; 
line-height: "same as div";

устанавливаемого сотовый код:

.parent { 
    text-align:center; 
    margin:0px; 
    width:100%; 
    padding:0px; 
    font-size:18px; 
    color:#000; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: justify; 
    -webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
     justify-content: space-between; 
} 

.child { 
    padding:18px 25px; 
    background: rgba(0, 0, 0, .5); 
    list-style-type:none; 
    width:inherit; 
    margin:5px; 

}

источник

2015-12-17 justme

Быстро и просто: центр по вертикали с помощью flexbox - http://stackoverflow.com/a/33049198/3597276 –

Это то, что вы хотите?

.parent { 
 
    text-align:center; 
 
    margin:0px; 
 
    width:100%; 
 
    padding:0px; 
 
    font-size:18px; 
 
    color:#000; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    vertical-align: middle; 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 

 
} 
 

 
.child { 
 
    position: relative; 
 
    background: rgba(0, 0, 0, .5); 
 
    padding:10px; 
 
    list-style-type:none; 
 
    width:inherit; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height:inherit; 
 
    display: inline-flex; 
 
    vertical-align: middle; 
 
    margin:5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
<div class="parent"> 
 
    <div class="child"><span>sometext</span></div> 
 
    <div class="child">somemoretext somemoretext</div> 
 
    <div class="child">sometext</div> 
 
    <div class="child">sometext</div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child">somemoretext somemoretext somemoretext somemoretext</div> 
 
    <div class="child">sometext</div> 
 
</div> 
 
</body> 
 
</html>

это делается с помощью гибкого трубопровода, как ур jsfiddle. u также может сделать это с помощью «родительской таблицы отображения и вертикального выравнивания по середине» и «дочерней ячейки таблицы отображения» и «посередине ванны», удаляя стили ur flex.

источник

2015-12-18 00:24:06 Vinc

Кажется довольно хорошим !! Могу ли я спросить, будет ли это работать в большинстве браузеров? :) Большое вам спасибо за ваш вклад :) – justme

u можете проверить [здесь] (http://caniuse.com/#search=flex) для совместимости css! Мое мнение заключается в том, что flex поддерживается во многих браузерах и фреймворках, и я думаю, что он безопасен в использовании. Ваш отдых css выглядит нормально. – Vinc

Спасибо :) приятный день – justme

Вы пробовали:

маржи: 0 авто;

источник

2015-12-17 23:56:19 leham789

да, но это все испортило! – justme

можете ли вы разместить html для вашего выравнивания, чтобы я мог попробовать для себя, пожалуйста? – leham789

вот вы: http://codepen.io/mariomez/pen/jWqBOv – justme

Если вам все равно, что divs с несколькими строками текста отрегулируют их высоту до фактического текстового содержимого, используйте height:100% на своих child элементах.

Если вам нужно все свое содержимое, чтобы остаться такой же высоты, добавьте

// Use any fixed value 
    line-height: 50px; 
    height: 50px;

Если вам необходимо изменить фиксированную высоту в пикселях whenver ваше окно изменяет размер, просто использовать JavaScript, чтобы изменить правила CSS (если используя этот метод, сначала напишите this, чтобы не замедлить работу вашего клиента при изменении окна).

источник

2015-12-18 00:16:49

Как выравнивать текст в середине (по вертикали)

ответ

Смежные вопросы