Solved

Cannot get DIV content to center in IE

Posted on 2007-11-14
3
2,171 Views
Last Modified: 2013-11-19
The following code works great in Firefox, with all elements centered on the page, but IE 6 or 7 will not center the contents:

<div id="container" style="text-align:center; width:700px">
    <div id="row1" style="display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
        <div style="float:left; width: 150px">
            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        </div>
        <div style="float:left; width: 150px">
            <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
        </div>
    </div>
    <div id="row2" style="clear:both; display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Image ID="Image1" runat="server" ImageUrl="../images/IVM/IVM-Rugged-Ethernet.png" Width="150px" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Image ID="Image2" runat="server" ImageUrl="../images/IVC/IVC.jpg" Width="150px" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Image ID="Image3" runat="server" ImageUrl="../images/IVR/IVR-Angled.png" Width="150px" />
        </div>
    </div>
    <div id="row3" style="clear:both; display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Button ID="Button2" runat="server" Text="Button" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Button ID="Button3" runat="server" Text="Button" />
        </div>
    </div>
</div>

Basically rows 1 2 and 3 should be centered within the 700px div "container".

What do I need to do to get this to work?
0
Comment
Question by:pwi11
  • 2
3 Comments
 
LVL 3

Expert Comment

by:arichterwork
ID: 20284967
You could do this:
<div id="container" style="text-align:center; width:700px">

<!-- added -->
<center>
<div id="innercontainer" style="width: 450px;">
<!-- /added -->

    <div id="row1" style="display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
        <div style="float:left; width: 150px">
            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        </div>
        <div style="float:left; width: 150px">
            <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
        </div>
    </div>
    <div id="row2" style="clear:both; display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Image ID="Image1" runat="server" ImageUrl="../images/IVM/IVM-Rugged-Ethernet.png" Width="150px" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Image ID="Image2" runat="server" ImageUrl="../images/IVC/IVC.jpg" Width="150px" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Image ID="Image3" runat="server" ImageUrl="../images/IVR/IVR-Angled.png" Width="150px" />
        </div>
    </div>
    <div id="row3" style="clear:both; display:table; margin:0 auto;">
        <div style="float:left; width: 150px">
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Button ID="Button2" runat="server" Text="Button" />
        </div>
        <div style="float:left; width: 150px">
            <asp:Button ID="Button3" runat="server" Text="Button" />
        </div>
    </div>

<!-- added -->
</div>
</center>
<!-- /added -->

</div>


The "float: left" is what was not allowing the use of "<center>" or "text-align: center" to function properly in IE.
0
 
LVL 3

Accepted Solution

by:
arichterwork earned 500 total points
ID: 20284985
Sorry, forgot to mention:

If you also want the text/buttons to be centered within each 150px div, then you would want to add "text-align:center;" to the innercontainer div, and remove it from the container div for it to look identical in IE and Firefox.
0
 

Author Comment

by:pwi11
ID: 20299354
Thanks arichterwork!!  That did it!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question