Выравнивание по вертикали в div-ах

[Удален]

6 ноября 2012, 19:37

1486

Подскажите пожалуйста, возможно ли div-ами выравнять логотип по центру без задания высоты блока шапки? Высота должна быть "резиновой" - меняться в зависимости от количества строк в правом блоке.

У меня что-то не получается это сделать div-ами и CSS.

С помощью таблицы это делается элементарно. Выравнивание вертикально по центру - по умолчанию:

<html>
<head>
    <title></title>
</head>
<body>
    <table  border="1" width="990" cellpadding="19">
	<tr>
	<td width="495">logo</td><td width="495" align="right">uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt</td>
	</tr>
	</table>
</body>
</html>

gif vertical-align.gif

gif vertical-align_2.gif

gif table.gif

20

Timotty

6 ноября 2012, 19:59

#1

<html>

<head>

    <title></title>

	<style>

		#nol {

			position:relative;

			border: 1px solid;

			display: table-cell; 

			vertical-align: middle;

			width:500px;

			height:300px;

		}

		#raz {

		

			border: 1px solid;

			position:absolute;

			top:50%;

			float: left;

			text-align: center;

		}

		

		#dva {

			

			float: right;

			border: 1px solid;

		}

		#clear {

			both:clear;

		}

	</style>

	

</head>

<body>

<div id='nol'>

    <div id='raz'>

	logo1

	</div>

	<div id='crear'>

	</div>

	<div id='dva'>

	uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurtuyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurtuyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt

	</div>

</div>	

</body>

</html>

[Удален]

6 ноября 2012, 20:12

#2

Timotty, нифига, не по центру получается :)

Я в Хроме проверял.

175

Ord

6 ноября 2012, 20:16

#3

<div style="background: url('...') left center no-repeat; padding: 0 0 0 100px;">Текст текст текст</p>

Создаем лучший кулинарный проект, iamcook.ru

[Удален]

6 ноября 2012, 20:21

#4

Ord:
<div style="background: url('...') left center no-repeat; padding: 0 0 0 100px;">Текст текст текст</p>

Не понял, при чём тут бакграунд? :)

Нужно без всяких картинок. Как в моём варианте с таблицей:

<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="990" cellpadding="19">
<tr>
<td width="495">logo</td><td width="495" align="right">uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt<br>uyytututututyyutyutyurt</td>
</tr>
</table>
</body>
</html>

---------- Добавлено 07.11.2012 в 00:24 ----------

А, понял. Ща попробую.

175

Ord

6 ноября 2012, 20:24

#5

Не понял, при чём тут бакграунд?
Нужно без всяких картинок. Как в моём варианте с таблицей.

Да чет я протупил. Надо подумать тогда

[Удален]

6 ноября 2012, 20:33

#6

Попробовал. Не получается.

20

Timotty

6 ноября 2012, 20:34

#7

Если придумаете решение CSSое, дайте знать, я бы на своём сайте не думая чистый js использовал и за секунду решил проблему :) Если с CSS не выйдет, рекоммендую JS :>

[Удален]

6 ноября 2012, 20:39

#8

Timotty:
Если с CSS не выйдет ...

... то самый лучший и надёжный вариант - использовать старый добрый <table> :)

IL

435

ivan-lev

6 ноября 2012, 21:51

#9

тема-то старая.. Если отказаться от древних IE - вполне решение получается..

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )

[Удален]

7 ноября 2012, 07:41

#10

ivan-lev:
тема-то старая.. Если отказаться от древних IE - вполне решение получается..

Читал и делал несколько дней. Но не получилось :)

Отказаться от древних IE - не проблема, отказываюсь!

Open AI тестирует память для ChatGPT

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ