Solved

Cannot get DIV content to center in IE

Posted on 2007-11-14
3
2,176 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

617 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