Выравнивание div внутри td

jools · May 29, 2009

Здравствуйте!

Проблема в том, что не смотря на text-align: center у TD, div, который внутри, не хочет выравниваться по центру. В чем проблема?

Вот кодик:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
	<title>Man</title>
	<style>
		.fighter {width: 200px; border-collapse: collapse;}
		.fighter td {border: 1px solid #000; vertical-align: top;}
		.head {text-align: center;}
		.head div {width: 50px; height: 50px; border: 1px solid #777; text-align: center;}

		.left_hand {text-align: right;}
		.left_hand div {width: 20px; height: 90px; border: 1px solid #777; text-align: center;}

		.right_hand {text-align: left;}
		.right_hand div {width: 20px; height: 90px; border: 1px solid #777; text-align: center;}

		.left_body {text-align: right;}
		.left_body div {width: 30px; height: 110px; border: 1px solid #777; text-align: center;}

		.right_body {text-align: left;}
		.right_body div {width: 30px; height: 110px; border: 1px solid #777; text-align: center;}

		.left_leg {text-align: center;}
		.left_leg div {width: 20px; height: 110px; border: 1px solid #777; text-align: center;}

		.right_leg {text-align: center;}
		.right_leg div {width: 20px; height: 110px; border: 1px solid #777; text-align: center;}
	</style>
</head>
<body>
	<table cellspacing="0" cellpadding="0" border="0" class="fighter">
	<tr>
		<td> </td>
		<td class="head" colspan="2"><div></div></td>
		<td> </td>
	</tr>
	<tr>
		<td class="left_hand"><div></div></td>
		<td class="left_body"><div></div></td>
		<td class="right_body"><div></div></td>
		<td class="right_hand"><div></div></td>
	</tr>
	<tr>
		<td> </td>
		<td class="left_leg"><div></div></td>
		<td class="right_leg"><div></div></td>
		<td> </td>
	</tr>
	</table>
</body>
</html>

Edited May 29, 2009 by jools

Dimitry Wolotko · May 29, 2009

text-align: center работает только для инлайновых элементов, если div вы замените на span - то всё будет великолепно.

Если укажете у td ширину, не в процентах, а в пикселях, то div можно будет выровнять через margin:0 auto;

jools · May 30, 2009

К сожаления у инлайнов не работает width и height. Поэтому span (или div с display: inline) не подходит.

А вот через margin:0 auto; попробую. Спасибо.

Nekromancer · May 30, 2009

inline-block?

jools · May 31, 2009

inline-block?

Да это то что нужно. Большое спасибо.

P.S. Как говорится RTFM :rolleyes:

Sign In

Выравнивание div внутри td

Question

jools

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

jools

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

jools

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information