Centering a “position: absolute” element

Sometimes we have a one-line div, having 3 elements. One floats to the left, one floats to the right, and one in the middle. The one in the middle often gets pushed around by the left/right element, resulting off-centered. related question.

<div id="container" class="text_align_center">
<div class="float_left"></div>
 
<div class="float_right"></div>
 
<div class="center"></div>
</div>

The fix is to give the following css to the center div.

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

Thanks to the following link. =)

http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s