Как разместить блок, точно по середине.

Комментарии  (6)

Вот хитрый способ как разместить DIV точно посередине и сделать его ширину зависимой от содержимого. И чтобы он был посередине независимо от разрешения монитора.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<title>Блок всегда посередине</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<style type="text/css">
.align_center
{
position: relative;
width: 100%;
border: 1px solid red;
}
.align_center:after{
content: '';
display: block;
clear: both;
}
.align_to_left{
position: relative;
right: 50%;
float: right;
}
.align_to_right{
border: 1px solid blue;
position: relative;
margin: 15px 15px;
padding: 10px 10px;
z-index: 1;
right: -50%;
}
</style>
<div class="align_center">
Это Div 100%
<div class="align_to_left">
<div class="align_to_right">
А это отцентрованый Div, ширина зависит от содержимого.
</div>
</div>
</div>
</body>
</html>
Пример
21
Июль
2009

6 Комментариев к статье:
“Как разместить блок, точно по середине. ”

  1. Решение оригинальное!!! Помогло!!!!

  2. костыль на костыле. доки нужно читать!
    #page {
    width: 700px;
    margin: auto;
    }

    center page text;

    и всё! не используйте то, что написано сверху

  3. nxasm:

    ты полностью прав.

  4. Ух ты, nxasm спасибо!!! Как говорится всё гениальное-просто.

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

  6. Обычно работает связка
    margin: 0 auto;
    Если такое дело не идет, то всегда можно родительский блок обозначить
    position: relative;
    а дочерний
    position: absolute;
    далее top, bottom, left, right на вооружение )

Оставить комментарий