use css to position block elements in a table

**edziffel** · 08-26-2012 10:48 PM

text-align:whatever works great on inline elements inside

Code:

<td></td>

tags, but have been hacking away with no results to get a block element to align inside the table data tags. Tried all sort of margin, div, postion, width, etc. combinations. Good old align:whatever works as an html table attribute, but yields validation errors.

Does anyone know how to use CSS to align block elements in a table cell?

Thanks

Ed

**edziffel** · 08-31-2012 10:21 AM

Well this isn't good...
Maybe my question is bad.
Let me restate:

Using

Code:

<table align:center>

works for block elements inside a table cell

Code:

<td><ol>...</ol></td>

but does not validate. Validating returns an error stating that align:center is obsolete and to use CSS
Using

Code:

<table style="text-align:center;">

only works for inline elements not block elements.

Is there a CSS solution for positioning block elememts inside a table cell that will validate?

thanks

**tracknut** · 08-31-2012 10:32 AM

As far as I know, the standard css methods for aligning block elements will work fine inside a <td>. For example <ol style="margin-left:10px"> should work, no?

Do you have a full code example of something you've tried that does not work?

Dave

**WestWeb** · 08-31-2012 10:38 AM

Here's a basic example of how to apply text-align: center; to a block level unordered list:

Code:

<!DOCTYPE>
<html>
	<head>
		<title>text-align: center;</title>
		<style type="text/css" media="screen">
			* { margin: 0; padding: 0; }
			td { width: 200px; border: 1px solid #00f; }
			td ul { text-align: center; border: 1px solid #f00; list-style: none; }
		</style>
	</head>
	
	<body>
		
		<table>
			<tr><td><ul><li>centered</li></ul></td></tr>
		</table>
		
	</body>
	
</html>

**edziffel** · 08-31-2012 06:56 PM

Thanks tracknut / webwest

Here is some test code with webwest's CSS in the head. Was using inline styling for testing as it seems faster for me if you are trying to sort things out.

Note that the lone cell is aligned right under the header, which is the goal, with the table being a block element being set to the right. If you change "right" to "left" or "center", another desired functional aspect, all is well . With the CSS I tried not so much. Maybe I just missed something. How do I get rid of all the HTML tags and get the same results?

Using FF15 for a browser. Sure chrome acts about the same. Not worried about IE.

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>table test case</title>
<!--		<style type="text/css" media="screen">			
			* { margin: 0; padding: 0; }
			td { width: 200px; border: 1px solid #00f; }
			td ul { text-align: center; border: 1px solid #f00; list-style: none; }
		</style>
-->
	</head>
	<body>
		<div style="width:800px;">
		<table align="right" style="border:solid 1px;">
			<tr>
				<th>This is a really long header so the cell will stretch</th>
			</tr>
			<tr>
			<td>
				<table align="center" style="border:dashed 1px;">
					<tr>
						<td>centerUp</td>
					</tr>
				</table>
			<td>
		</table>
		</div>
	</body>
</html>

**tracknut** · 08-31-2012 09:24 PM

This would be a lot easier without the tables, but I'll play along...

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>table test case</title>
<!--		<style type="text/css" media="screen">			
			* { margin: 0; padding: 0; }
			td { width: 200px; border: 1px solid #00f; }
			td ul { text-align: center; border: 1px solid #f00; list-style: none; }
		</style>
-->
	</head>
	<body>
		<div style="width:800px;">
		<table style="float:right;border:solid 1px;">
			<tr>
				<th>This is a really long header so the cell will stretch</th>
			</tr>
			<tr>
			<td>
				<table style="width:200px;margin:0 auto;border:dashed 1px;">
					<tr>
						<td><span style="display:block;text-align:center">centerUp</span></td>
					</tr>
				</table>
			</td>
			</tr>
		</table>
		</div>
	</body>
</html>

Dave

**edziffel** · 09-01-2012 11:21 AM

tracknut,

And there it is.

Was totally missing the float and display:block, which seems embarrassingly obvious now that I'm looking at it. After all, how else does one expect to display a block?

Just what I needed. Good stuff.

Thank you very much.

Thread: use css to position block elements in a table

Thread Tools

Display

use css to position block elements in a table

SOLVED Center block elements in a table cell

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions