Отцентровать блок по самой длинной строке?

Skvoznyak · 28.02.2008

Задача следующая - есть внешний блок определенной ширины, и внутренний с шириной неопределенной. внутренний хочется отцентровать по самой длинной строке во внешнем, то есть чтобы самая длинная строка была по центру, а остальные по ее левому краю.
реально ли это?

<style type="text/css">
.node
{
width: 200px;
border: 1px green solid;
}

</style>

<div class="node">

<div class="descr">
<h2>xtxtxtxtxttxtx</h2>
<h3>zzz</h3>
<p>ss</p>
</div>
</div>

DCat · 29.02.2008

Ответ: Отцентровать блок по самой длинной строке?

Это?

Код:

<html><head>
<style type="text/css">
.node
{
width: 200px;
border: 1px green solid;
}
.descr {
border: solid 1px #F00;
text-align:left;
width:1px;
display:table;
}
h2, h3, p {
border:solid 1px #0F0;
}
</style>
</head>
<body>
<div class="node">
<center>
	<div class="descr">
		<h2>xtxtxtxtxttxtx</h2>
		<h3>zzz</h3>
		<p>ss</p>
	</div>
</center>
</div>
</body>
</html>

Skvoznyak · 29.02.2008

Ответ: Отцентровать блок по самой длинной строке?

yes!

спасибо огромное

ray:

только вот <center> в xhtml не годится. посему вот так:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

<head>
<style type="text/css">
.node
{
width: 200px;
border: 1px green solid;
text-align: center;
}
.descr {
border: solid 1px #F00;
width:1px;
display:table;
margin: 0 auto;
}

h2, h3, p
{
text-align: left;
}
</style>
</head>
<body>
<div class="node">
	<div class="descr">
		<h2>xtxtxtxtxttxtx</h2>
		<h3>zzz</h3>
		<p>ss</p>
	</div>
</div>
</body>
</html>

Поиск

Отцентровать блок по самой длинной строке?

Skvoznyak

DCat

Участник

Skvoznyak