Art Of Programming

musings by Dmytrii Nagirniak

CSS Trcik of the Day

Tried to align div in IE7 and FF3. The code is similar to this one:

   1: <div class="container">
   2:   <div class="child">Some content</div>
   3: </div>

 

I wanted to align (let’s say center) child element in relation to container. So I wrote text-align: center CSS to container. It worked in IE, but not in FF. That was very disappointing for me and I couldn’t figure out what a problem was. I could align it, but it would require to modify HTML. And I suddenly found this. Many thanks to this guy.

Lesson learned. If you use text-align for layout things and need FF additionally add text-align: -moz-center rule to the CSS.

How I could possibly know about -moz-FTW for the text-align

Comments

Dmytrii Nagirniak
Yes. But it only applies if you only need to center it. I had to mention that I have to align on left, right or center. I don’t know at design time how the child should be aligned, so I must write all 3 cases.
So this guy saved my day.
Peter Morris
I think you can do something like

.child
{
width : auto;
margin-left : auto;
margin-right: auto;
}

Comments