Как текст может быстро выровнять середину по вертикали внутри div?

Question

Как текст может быстро выровнять середину по вертикали внутри div?

0

Я знаю, как вертикально выравнивать текстовый центр внутри div, когда высота текста известна. Скажем, высота текста 20 пикселей.

Оберните текст пролетом. Стиль div & span.

div {
     position: relative;
}
span {
    display: block
    position: absolute;
    top: 50%;
    height: 20px;
    margin-top: -10px;
}

Теперь я хочу оперативно согласовать текст. Я хочу, чтобы размер шрифта был пропорционален высоте тела. Скажем, у меня есть следующий стиль:

body {
    font-size: 100%;
}
span {
    font-size: 1.5em;
}

Затем я изменил размер шрифта тела при изменении размера окна. В этой ситуации высота текста не определяется. Затем, как вертикально выравнивать текст в середине?

Я знаю, что я могу использовать JavaScript для динамического изменения высоты и крайности диапазона. Но я должен сделать это после изменения размера окна. Тогда есть шанс, что размер окна изменился, тогда пользователь увидит текст не посередине, затем выполнит код JS и текст подпрыгнет до середины div. Это не может быть приемлемым решением.

Я хочу знать, есть ли чистое решение CSS.

Думаю, я могу использовать следующий стиль для вертикального выравнивания текстового центра.

div {
    display: table-cell;
    vertical-align: middle;
}

Но с этим решением край div не отображается должным образом. И семантика неверна.

Итак, есть ли идеальное решение?

zyy7259 21 окт. 2013, в 05:50

Источник

0

Вы не ищете это тогда? jsfiddle.net/Wznmc
Josh Crozier 21 окт. 2013, в 02:58
0

Маржа не будет работать в этом решении, как я отмечаю в последнем описании.
zyy7259 21 окт. 2013, в 03:05
0

Я знаю, ты сказал, что ... вот почему я спросил ... просто проверял, не упустил ли ты что-то.
Josh Crozier 21 окт. 2013, в 03:08

Показать ещё 1 комментарий

Теги:

javascript

html

css

vertical-alignment

3 ответа

Ещё вопросы

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

nishanths · Answer 1 · 2015-08-15T05-09-00.000Z

С помощью гибкой коробки вы можете сделать это: JSBIN

По сути, вот код (не забудьте добавить префиксы, если необходимо):

html, body { height: 100%; margin: 0px; }

body {
  display: flex;
  justify-content: center; /* horizontal centering */
}

div {
   align-self: center; /* vertical centering */
}

<body>
  <div>Centered</div>
</body>

keshav · Answer 2 · 2015-08-15T04-44-00.000Z

Помощник Div может помочь вам вертикально выровнять div

Лучше всего для меня, вы можете изменить его соответственно

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

veratti · Answer 3 · 2015-06-03T18-18-00.000Z

Еще одно чисто CSS (CSS3) решение без свойств отображения таблицы должно было бы использовать свойство transform: translateY().

Вам понадобится контейнер div и внутренний диапазон для текста:

HTML

<div id="container">
    <span>Your Text</span>
</div>

CSS

#container{
    position: relative;
}

#container span{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);

    /* Your font-size CSS */
}

Пример JsFiddle: https://jsfiddle.net/a0m4xnex/1/

Вы можете использовать ту же стратегию для горизонтального центрирования, что и для translateX.