Центрирование вещей по вертикали (и по горизонтали) - PullRequest
Новая
       0

Центрирование вещей по вертикали (и по горизонтали)

2 голосов
/ 14 марта 2011

Почему пытаться выровнять что-либо в центре области просмотра (или оболочки) по вертикали или по горизонтали (или обоим) так больно?

Я перепробовал все, что смог найти за последний час, от таких сайтов, как W3Schools до S / O и MSDN - я просто не знаю, как это сделать. Должен быть простой способ сделать это. И ПОЧЕМУ вы можете центрировать DIV горизонтально следующим образом: margin: 0 auto; но не вертикально? И почему вы не можете использовать тот же подход с любым другим элементом на странице?

У меня есть предложение в одну строку (отзыв), которое я хотел бы центрировать по вертикали и горизонтали, как я могу это сделать?

Ответы [ 4 ]

5 голосов
/ 14 марта 2011

Роджер Йоханссон написал интересную статью об этом здесь: http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/

Вот суть этого: 

<body>
    <div id="body">
        Content goes here
    </div>
</body>

С этим css: 

html, body { width:100%; height:100%; }
html { display:table; }
body {display:table-cell; vertical-align:middle; }
#body { max-width:50em; margin:0 auto; }
4 голосов
/ 14 марта 2011

Это будет центрировать как по горизонтали, так и по вертикали, и оно работает во всех браузерах, включая режим IE quirks. 

div{
    width:200px;
    height:200px;
    background:red;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px; /* Negative half the width*/
    margin-top:-100px; /* Negative half the height */
}

Проверьте рабочий пример на http://jsfiddle.net/Nt5PU/

1 голос
/ 14 марта 2011

Для центрирования строки текста установите для атрибута CSS line-height ту же высоту, что и для блока, в котором она содержится.

0 голосов
/ 14 марта 2011

Эй, это больно, да, это так. Глупо, что в HTML по умолчанию нет встроенных вещей, и даже в HTML5 приходится использовать одни и те же хаки. Но попробуйте эти решения, вы не пожалеете, чтобы заново изобрести все http://intensivstation.ch/en/templates/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...