Как центрировать блок и его содержимое в CSS? - PullRequest
Новая
       0

Как центрировать блок и его содержимое в CSS?

0 голосов
/ 22 января 2012

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

<!DOCTYPE html>

<html>
<head>
    <style type="text/css"><!--
#content {
width:500px;
padding: 10px 10px 10px;
background-color: #D1ECFF;
position: relative;
border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
--></style>
</head>
<body>

<div id="content">

    <h2>Create</h2>

</div>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 22 января 2012

Поскольку #content имеет ширину, вы можете установить левое и правое поля на auto. Это будет центр элемента в его родителя. Короткий бит кода margin: 0 auto; устанавливает верхнее / нижнее поле на ноль, а левое / правое на авто.

http://jsfiddle.net/vL5r2/

#content {
    margin: 0 auto;
    width:500px; 
    ...
0 голосов
/ 22 января 2012

Если вы хотите центрировать прямоугольник и его содержимое как по вертикали, так и по горизонтали, вы можете сделать это с абсолютным позиционированием и отрицательными полями, как можно увидеть в this jsfiddle .

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

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

...