HTML and CSS   XSLT   JavaScript   Images   Soft   Etc  
Vladimir Tokmakov

Center alignment 1 February 2008


Task:

Place a center aligned block inside another block.

It’s really very simple ;)

How it looks in the browser

Alignment with respect to this block
Block width depending on line length
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;">
Alignment with respect to this block
    <div class="align_center_to_left">
        <div class="align_center_to_right" style="margin: 1em 0; border: 1px dashed green; color: green;">
            Block width depending on line length
        </div>
    </div>
</div>

Order a design...