Как центрировать текст по вертикали в HTML, используя только CSS - PullRequest
Новая
       8

Как центрировать текст по вертикали в HTML, используя только CSS

4 голосов
/ 31 мая 2010

У меня очень простой HTML. Из-за некоторых ограничений я не могу изменить содержимое HTML. Я хочу центрировать текст по вертикали только с помощью CSS. 

<html>
    <head>...</head>

    <body>
        <div>Oops, the webpage is currently not available.</div>
    </body>
</html>

Обратите внимание, что размер HTML может быть переменным.

Кроме того, если текст не может быть отображен в одной строке, он должен быть разбит на несколько строк.

Возможно ли это?

Ответы [ 5 ]

4 голосов
/ 31 мая 2010

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

Есть несколько обходных путей, см. http://phrogz.net/css/vertical-align/index.html

3 голосов
/ 31 мая 2010

Другое возможное решение: 

<html>
    <head>
        <title>Title</title>
        <style>
            body {height:100%}
        </style>
    </head>

    <body>
        <div style="height:100%;">
            <div style="position:relative;top:50%;text-align:center">Oops, the webpage is currently not available.</div>
        </div>
    </body>
</html>
2 голосов
/ 31 мая 2010 
<html>
    <head>...
       <style type="text/css">
           div{
               width: 300px;
               height: 300px;
               border: solid blue;
               display: table-cell;
               vertical-align: middle;
           }
       </style>
    </head>

    <body>
        <div>This works fine!</div>
    </body>
</html>
1 голос
/ 09 сентября 2014 
<html>
    <head>
        <style type="text/css">
            .vertical {
                margin: 0;
                background: yellow;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%) 
            }
        </style>
    </head>
    <body>
        <div class="vertical">
         Centered
        </div>
    </body>
</html>
0 голосов
/ 02 ноября 2013

Попробуйте это: 

.text-tag{

    text-align: center;
    margin-top: 25%;
}

И примените «text-tag» к тексту, который вы хотите центрировать.

...