CODEWITHSUNDEEP
html
aman.kejriwal
aman.kejriwal

Reputation: 225

Center a row element in a table

I have an html table of width 222px

Inside in I have a single row with width defined as 160px.

Inside this row, there is a single column having same width as that of the row.

My question is, how to align this row to the center of the table.

I have tried align="center"and style="float:center;" but these work only on the contained text.

Upvotes: 0

Views: 4221

Answers (4)

Muhammad Raheel
Muhammad Raheel

Reputation: 19882

You must use this

<td align = 'center'>Blah blah</td>

using this wont work

<tr align = 'center'></tr>

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46579

But if you really, really must use a table, here's how to style it:

.resultset {
  width:222px; border:1px solid;
  border-collapse:separate; border-spacing:30px 2px;
}
.resultset td {
  border:1px solid;
}

Where the 30px in the border-spacing is half the horizontal difference between the table width and the cell width.

See jsFiddle.

Upvotes: 1

Deblaton Jean-Philippe
Deblaton Jean-Philippe

Reputation: 11398

you can try this like that

 <table width="222px" align="center">
 <td width="31px"></td>
 <td width="160px">test</td>
 <td width="31px"></td>
 </table>

test here : http://www.webmasterorbit.com/wysiwyg-html-tester.html

Upvotes: 0

Shawn
Shawn

Reputation: 136

Agree with Quentin. There is no point having a 1x1 table.

Try with the following.

<div style="margin: 0px auto; position: relative; width: 222px;">
....your content
</div>

You might want to create a CSS class for the div. I personally don't like having inline styles.

Upvotes: 0

Related Questions