CODEWITHSUNDEEP
htmlcss
vandango
vandango

Reputation: 567

Convert html layout table to div tag and CSS

I would like to convert the table below into a series of DIV tags, styled with CSS. I have used text-align, and am familiar with display: block; and margin: auto type tricks, but nothing gives me the same result as this simple table layout:

<table width="100%">
  <tr>
    <td align="center">
      <div>some objects</div>
    </td>
  </tr>
</table>

The issue with using the other approaches I'm familiar with is that they rely on me knowing the width of the objects I'm trying to align - which I don't. I want to be able to center arbitrarily wide objects, such as buttons and images.

Upvotes: 1

Views: 10737

Answers (8)

Devner
Devner

Reputation: 7255

Use tabletodivconverter.com to convert html layout table to div tag and CSS. Did I mention that it's free?

Upvotes: 0

luxi
luxi

Reputation: 317

margin: 0 auto; works perfectly anyway. If you are suffering from this, try to use text-align: center;

div{margin: 0 auto; text-align: center;} /* Replace div to your selector. */

After you could use text-align: left; if you like to others.

Upvotes: 1

Deven Patil
Deven Patil

Reputation: 109

You can use text-align: center; to center the objects in a parent container without knowledge about the width of the objects.

Upvotes: 0

Rahul Razdan
Rahul Razdan

Reputation: 429

I tried your code here with CSS and divs:

<html>
    <head>
        <style>
            #td{
                text-align:center;
            }
        </style>
    </head>

    <body>
        <table width="100%">
            <tr>
                <td align="center">
                    <div>some objects</div>
                </td>
            </tr>
        </table>

        <div id="table">
            <div id="td">
                Some objects
            </div>
        </div>
    </body>
</html>

Please run the above code. Both are displaying in the same manner. If the above is not what you want, then please can you show what you tried?

Upvotes: 0

Manish Mishra
Manish Mishra

Reputation: 12375

If you simply want your inner div to be in center of the outer container, you can simply do this (without using table):

<div class="parent">
   <div>some objects</div>
</div>

Where .parent is:

.parent
{
    text-align: center;
    width: 100%;
}

See this fiddle.

You just have to use text-align:center CSS to center align your inner content.

Note that, parent container must have enough width to show visible spaces at the left and right ends.

Upvotes: 0

Fenton
Fenton

Reputation: 251232

You should be able to use a div like this...

HTML

<div class="example">
    Some objects!
</div>

CSS

.example {
    width: 60%;
    margin: 0 auto;
}

I am slightly guessing that you are just using the table in order to make the div tag appear in the middle of the screen - the margin style does this.

To center child elements, which I guess are also div elements, you need to do two things.

.example {
    text-align: center;
}

.example .button {
    display: inline-block;
}

I can be more specific if you can show me your markup - maybe on a JSFiddle.

Upvotes: 0

Aram Kocharyan
Aram Kocharyan

Reputation: 20431

You could use display:table;

http://jsfiddle.net/3Z4E8/

<div class"table">
  <div class="row">
    <div class="cell" style="text-align:center">
      <div>some objects</div>
    </div>
  </div>
</div>


.table {
    display: table;
    width: 100%;
    border: 1px solid blue;
}
.row {
    display: table-row;
    border: 1px solid red;
}
.cell {
    display: table-cell;
    border: 1px solid green;
}

See the docs.

Upvotes: 0

Christoph
Christoph

Reputation: 51261

What you are doing there can be achieved with exactly this:

<div>some objects</div>

css:

div{
    text-align:center;
}

No more fuzz needed. text-align basically centers the content, so you can place other elements into that div which get perfectly centered automatically.

Demo

Upvotes: 0

Related Questions