Вертикальное выравнивание декста в div

[veromi]

Помогите новичку с вертикальным выравниванием ..

Создаем div,задаем ему ширину и высоту, ставим фон, помещаем в этот див текст. Текст прилипает книзу и никакими valign или vertical-align центроваться не хочет.

Например

HTML

<div id="catalog" >
<div id="uslugi">Услуги</div>
<div id="price"><Стоимость</div>
<div id="contacts">Контакты</div>
</div>

CSS

#catalog{	
	position:relative;
	left: 241px;
	color: #718447;
	top: 33px;
	font-size: 19px;
	font-weight: normal;
	text-align:center;
	}
#uslugi{
        width:221px;
        height:46px;
        background-image:url(header_front-1.jpg);
        float:left;
       }	
#price{
        width:221px;
        height:46px;
        background-image:url(header_front-2.jpg);
        float:left;
        }	
#contacts
        {
        width:221px;
        height:46px;
        background-image:url(header_front-3.jpg);
        float:left;}	

[fragilewelldone]

помоему тексту нужно задать стиль например :

p{vertical-align:middle}

[Gaspode]

P не надо. Надо линейный элемент. span какой-нибудь.

[veromi]

Господа не работает.

Выкладываю обновленный код.

<div id="catalog" >
<div id="left_button" ><span class="uslugi"><a title="Информация об услугах" href="index.html">Услуги</a></span></div>
<div id="middle_button"><span class="price"><a title="Информация о стоимости" href="price/index.html">Стоимость</a></span></div>
<div id="right_button"><span class="contacts"><a title="Информация об услугах" href="contacts/index.html">Контакты</a></span></div>
</div>

	/* Плавающий див с 3-мя кнопками */
#catalog{	
	position:relative;
	left: 241px;
	color: #718447;
	top: 33px;
	font-size: 19px;
	font-weight: normal;
	text-align:center;
		}
	/* 3 дива с различными изображениями внутри каждого дива */	
#left_button{width:221px; height:46px; background-image:url(header_front-1.jpg); float:left;   }	
#middle_button{width:221px; height:46px; background-image:url(header_front-2.jpg); float:left;}	
#right_button{width:221px; height:46px; background-image:url(header_front-3.jpg); float:left;}	
	/* стиль текста первого дива*/	
.uslugi a{color: #075643;  text-decoration: none; vertical-align:middle;}
.uslugi a:hover{ color: #075643; text-decoration: none; vertical-align:middle;}
.uslugi a:active{ color: #075643;text-decoration: none;  vertical-align:middle;}
/* стиль текста второго дива*/	
.price a{color: #075643; text-decoration: none; vertical-align:middle;}
.price a:hover{ color: #075643; text-decoration: none; vertical-align:middle;}
.price a:active{ color: #075643;text-decoration: none; vertical-align:middle;}
/*стиль текста третьего дива*/	
.contacts a{color: #075643; text-decoration: none; vertical-align:middle;}
.contacts a:hover{ color: #075643; text-decoration: none; vertical-align:middle;}
.contacts a:active{ color: #075643; text-decoration: none; vertical-align:middle;}

Когда я добавил к тексту ссылку, текст прилип к верхней границе дива

Что я делаю не так?

[amelice]

veromi как мне кажется

1. у вас очень много лишнего кода.

2. В вашем случае ссылки при обычном состоянии, при наведении, при нажатии на них - имеют одинаковые свойства. В таком случае напишите стили для одного варианта.

3. vertical-align тут не поможет, надо применить line-height, если нужно отцентрировать внутри блока.

vertical-align как то хитро работает от базовой линии идет отсчет, но центр блока не считается базовой линией текстового блока.

А по поводу vertical-align хотелось бы услышать мнения других.

Как форматируется текст, когда задано vertical-align:middle;

Вот вам пример http://jsfiddle.net/5F7ke/9/. (красный бордер я добавила, чтоб было понятно)

Edited September 1, 2011 by cheburek

[PanSoul]

veromi как мне кажется

1. у вас очень много лишнего кода.

2. В вашем случае ссылки при обычном состоянии, при наведении, при нажатии на них - имеют одинаковые свойства. В таком случае напишите стили для одного варианта.

3. vertical-align тут не поможет, надо применить line-height, если нужно отцентрировать внутри блока.

vertical-align как то хитро работает от базовой линии идет отсчет, но центр блока не считается базовой линией текстового блока.

А по поводу vertical-align хотелось бы услышать мнения других.

Как форматируется текст, когда задано vertical-align:middle;

Вот вам пример http://jsfiddle.net/5F7ke/9/. (красный бордер я добавила, чтоб было понятно)

Не корректный пример - подходит для единичный случаев, когда заранее известно, что текста будет ТОЛЬКО на одну строчку. А есле заранее не известно каков размер текста, то Ваша вёрстка развалится.

Для этих целей существует vertical-align, но т.к. он принимается только в ячейках и для выравнивания строчных элементов друг относительно друга, то...да-да, Вы уже наверно догадались - нужно сэмулировать ячейку, применив свойство display:table-cell.

Вот пример

<!DOCTYPE html>
<html>
<head>
<title>eXample</title>
<style>
#catalog{       
	margin:20px;
    color: #718447;
    font-size: 19px;
    font-weight: normal;
    text-align:center;
	border:2px dashed gray;
	overflow:hidden;
	float:left;
	padding:10px;
        }

#catalog div{
	border:1px solid #e57714;
	display:table-cell;
	vertical-align:middle;
	width:221px;
	height:100px;
}		

#price{
	background:#ebebeb;
}       

#contacts{
	background:#c3c4c5;
} 
</style>
</head>
<body>
	<div id="catalog" >
		<div id="uslugi">много-много-много текста, очень много</div>
		<div id="price">Стоимость</div>
		<div id="contacts">Контакты<br/>и другое</div>
	</div>
</body>
</html>

P.S. К сожалению, данное свойство (table-cell) не понимает IE до 7 версии включительно.

Но, не переживайте, есть ОДИН ВЕЛИКИЙ ПОСТ, который в своё время, наверно, все добавили к себе в избранное. И так, барабанная дробь, - вот, прошу проходите и радуйтесь ПОСТОМ

Edited September 2, 2011 by PanSoul

[amelice]

Не корректный пример - подходит для единичный случаев, когда заранее известно, что текста будет ТОЛЬКО на одну строчку. А есле заранее не известно каков размер текста, то Ваша вёрстка развалится.

Для этих целей существует vertical-align, но т.к. он принимается только в ячейках и для выравнивания строчных элементов друг относительно друга, то...да-да, Вы уже наверно догадались - нужно сэмулировать ячейку, применив свойство display:table-cell.

PanSoul, я могу вам с точностью до наоборот заявить, что ваш пример НЕ корректный, если исходить от данной задачи.

Все зависит от постановки задачи, зачем усложнять то, что можно решить одной строчкой?

[PanSoul]

Не корректный пример - подходит для единичный случаев, когда заранее известно, что текста будет ТОЛЬКО на одну строчку. А есле заранее не известно каков размер текста, то Ваша вёрстка развалится.

Для этих целей существует vertical-align, но т.к. он принимается только в ячейках и для выравнивания строчных элементов друг относительно друга, то...да-да, Вы уже наверно догадались - нужно сэмулировать ячейку, применив свойство display:table-cell.

PanSoul, я могу вам с точностью до наоборот заявить, что ваш пример НЕ корректный, если исходить от данной задачи.

Все зависит от постановки задачи, зачем усложнять то, что можно решить одной строчкой?

ДавайТе, чтобы не подраться, обусловимся на том, что Наши примеры оба Некорректны или что оба Верны - предлагаю выбрать 2-ой вариант, ибо у Вас пример лучше всего подходит под решение задачи, где нужна 1 строчка, а мой пример - для n строчек

Да и думаю для автора будет интересно узнать множество подходов и решений)

Edited September 2, 2011 by PanSoul

[Great Rash]

http://forum.htmlbook.ru/index.php?showtopic=28411

[amelice]

ДавайТе, чтобы не подраться, обусловимся на том, что Наши примеры оба Некорректны или что оба Верны - предлагаю выбрать 2-ой вариант, ибо у Вас пример лучше всего подходит под решение задачи, где нужна 1 строчка, а мой пример - для n строчек

Да и думаю для автора будет интересно узнать множество подходов и решений)

Просто не нужно делать выводы - Не корректный или Корректный, а нужно исходить от задачи. Все методы хороши если применить к месту.

Да и думаю для автора будет интересно узнать множество подходов и решений)

А с этим согласна, чем больше знаешь решений тем лучше.

Edited September 2, 2011 by cheburek