Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Cannot get DIV content to center in IE

Posted on 2007-11-14
3
Medium Priority
?
2,185 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 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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.
Suggested Courses

926 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