Thursday, October 8, 2009

Centering Div block within its Div container parent

I have HTML Markup in the following:
<div id="adContainer">
                <div id="textAdFrame">
                    <ul id="adFrame">
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">Best HOTEL in town?</h2>
                                <p class="detail">Which hotel has the softest pillow? Do you know? Tell everybody! Give them a Rate!</p>
                            </a>
                        </li>
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">Emergency numbers?</h2>
                                <p class="detail">Click here for POLICE, FIRE, AMBULANCE  and other useful numbers!</p>
                            </a>
                        </li>
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">The best restaurant in Phnom Penh!</h2>
                                <p class="detail">Where to get the best fried rice? Do you know? Tell everybody! Give them a Rate!</p>
                            </a>
                        </li>
                    </ul>
                </div>

</div>

Now please have a look at the css codes below:
#adContainer #textAdFrame{
    margin:0 auto;
}

As a result, you will see <div id="textAdFrame"> and its content is at the center of its parent container. You might wonder why it is so useful, because it is different from text-it is a div block. So, you cannot use text-align:center to make div block sit right in the center of its container.

1 comment:

  1. After getting very much annoyed reading about web design companies i search on the internet for a good denver web design and my search is over when i found
    this site. My experience with them is fantastic.

    ReplyDelete