Выравнивание по центру

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Владимир Токмаков

1 февраля 2008


Задача.

Разместить блок произвольной ширины в центре другого блока.

Все очень просто ;)

Как это выглядит в браузере

Выравниваем относительно этого блока.
Ширина блока зависит от размера надписи.
01 
02 
03 
04 
05 
06 
07 
08 
09 
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 
<style type="text/css">
.align_center
{
position: relative;
width: 100%;
}
.align_center:after
{
content: '';
display: block;
clear: both;
}
.align_center_to_left
{
position: relative;
right: 50%;
float: right;
}
.align_center_to_right
{
position: relative;
z-index: 1;
right: -50%;
}
</style>
<div class="align_center" style="border: 1px dashed red; color: red;">
Выравниваем относительно этого блока.
    <div class="align_center_to_left">
        <div class="align_center_to_right" style="margin: 1em 0; border: 1px dashed green; color: green;">
            Ширина блока зависит от&nbsp;размера надписи.
        </div>
    </div>
</div>