Как центрировать текст по вертикали с помощью css

Я пытался найти, как центрировать текст по вертикали, но я не могу найти удовлетворительный ответ. Лучший ответ, который я нашел до сих пор, this. Это делает его похожим на то, что он позволяет мне центрировать текст по вертикали, но если я его использую и добавляю больше текста, он расширяется только донизу и не перецентрируется, как то, что происходит по горизонтали.

Заметьте, я ищу только CSS-решение, поэтому нет javascript. Заметьте, я хочу иметь возможность добавлять несколько строк текста.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
    div#maindiv {
        width: 810px;
        height: 99px;
        background-color: black;
        margin: 0px;
        padding: 0px;
        color: white;
        font-family: Sans-serif;
        text-align: center;
        display: table;
    }
    div#maindiv span {
        font-size: 1.1em;
    }


    div#part1 {
        width: 270px;
        height: 99px;
        background-color: #6DCAF2;
        float: left;
        vertical-align: middle;
        position: relative;
    }

    div#horizon1 {
        background-color: green;
        height: 1px;
        left: 0;
        overflow: visible;
        position: absolute;
        text-align: center;
        top: 50%;
        visibility: visible;
        width: 100%;
    }

    div#content1 {
        background-color:green;
        height:99px;
        width: 270px;
        position: absolute;
        top: -50px;
    }

</style>
<title>XHTML-Strict</title>
</head>
<div id="maindiv">
<body>
    <div id="part1">
        <div id="horizon1">
            <div id="content1">
                <div id="bodytext1">
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor augue, faucibus quis sagittis
                    <span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

В конце концов, я хочу иметь 3 блока, каждый из которых центрирует текст посередине. Эти тексты редактируются клиентами, поэтому они должны иметь возможность охватывать несколько строк. В настоящее время текст начинается в верхней части окна и идет в конец, в конце концов, я хочу, чтобы текст начинался в точке, поэтому центр тела текста располагался в центре поля.

Мое окончательное решение, Примечание: vertical-align не работает, если у вас есть float: осталось в том же div.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
    div#maindiv {
        width: 810px;
        height: 99px;
        background-color: black;
        margin: 0px;
        padding: 0px;
        color: white;
        font-family: Sans-serif;
    }
    div#maindiv span {
        font-size: 1.1em;
    }

    div.part {
        width: 262px;
        height: 99px;
        padding: 0px;
        margin: 0px;
        padding: 4px;
        border: 0px;
        color: white;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

    div.bgc1 {
        background-color: #6DCAF2;
    }

    div.bgc2 {
        background-color: #2A4B9A;
    }

    div.bgc3 {
        background-color: #FF8A00;
    }


</style>
<title>XHTML-Strict</title>
</head>
<div id="maindiv">
<body>
    <div style="float: left;">
        <div class="part bgc1">
            <span>
                Vegeta! What does the scouter say about his power level?!
            </span>
        </div>
    </div>
    <div style="float:left;">
        <div class="part bgc2">
            <span>
                It over NINE THOUSAAAAAAAAAND!
            </span>
        </div>
    </div>
    <div style="float:left;">
        <div class="part bgc3">
            <span>
                What NINE THOUSAND? There is no way that can be right!
            </span>
        </div>
    </div>
</div>
</body>
</html>

Ответы

Ответ 1

Вы можете установить контейнер display:table-cell и добавить vertical-align:middle:

http://jsfiddle.net/ptriek/h5j7B/1

(Но IE7 и ниже этого не понравится...)

Ответ 2

Ну, есть несколько решений.

Самый простой

#centerme
{
    // will center the text vertically, but looks bad with multiliners
    line-height:20em; 
}

Для многострочных линий вам нужно поместить поле "a-box-in-a-box" 

#parentbox
{
   // we need the "parent" to have some kind of height
   height:20em; 

  // the most important... position children "relative" to the parent
   position:relative;
}

.childbox
{
   position:absolute;
   left:0;
   top:50%;
   margin-top:-5em; // this pulls the child back "up" to the vertical center
}

Проблема заключается в том, что "высота" вашего многострочного слоя должна быть известна (или, по крайней мере, догадываться), поэтому она фактически центрирует вертикальные.

ЧТО ВАМ НУЖНО ЗНАТЬ

Нет чистого метода CSS, чтобы узнать о высоте элемента, который затем позволит нам центрировать его вертикально "адаптивным" способом!

Это означает, что при изменении текста вы также должны изменить CSS, чтобы убедиться, что он все еще подходит.

Это может быть раздражающим и что где и почему большинство людей возвращается к использованию javascript для работы над этим раздражением CSS "недостающей функции". В конце концов, javascript облегчает нам все (по крайней мере, в таких случаях).

MORE

Там много Q & A об этом происходит вокруг Интернета и вокруг этого веб-сайта. Если вы их пропустили, вот некоторые из них:

и есть еще много; все из которых обеспечивают индивидуальные решения для отдельных случаев. Это поможет вам стать более уверенным (поскольку вы изначально заявили, что вы новичок в этом стиле CSS).

Ответ 3

<div style="height:50px;line-height:50px;">
    Text
</div>

Ответ 4

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

например.

<div style="height:32px;>
    <p style="line-height:32px;">Text</p>
</div>

Вы хотели бы получить их во внешнем листе css.

Если я правильно понимаю ваш вопрос.