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

Ngels · December 6, 2010

Добрый день!

Никак не могу справиться с вертикальным выравниванием.

Есть меню из дивов в списке. В дивах как картинки, так и текст. Одно из картинок выше других. У меня выравнивается по верхней границе, а нужно по нижней.

HTML

<div id="header_img">
	<ul id="categories_img">
		<li><a href="#"><div><img src="../About_l.png" width="175" height="100" /></div>Contacts</a></li>
		<li><a href="#"><div><img src="../Cable_pic.png" width="350" height="200" /></div>Cable</a></li>
		<li><a href="#"><div><img src="../Sound_pic_l.png" width="175" height="100" /></div>Sound</a></li>
		<li><a href="#"><div><img src="../Accs_pic_l.png" width="175" height="100" /></div>Accs</a></li>
	</ul>
</div>

CSS

#header_img {
	margin: 50px 0px 0px 50px;
}	

	#header_img ul#categories_img {
	float: center;
	list-style: none;
	}
		#header_img ul#categories_img li {
	float: left;
	font: "Myriad Pro";
	text-align: center;
		}
			#header_img ul#categories_img li a {
	display: block;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #000;
	text-decoration: none;
			}
				#header_img ul#categories_img li a:hover {
	color: #999;
				}

   A IMG {
	border: none;
   }

Я уж вставлял где только можно:

display: table-cell;
vertical-align: bottom;

Ничего не выходит

display: table-cell;

vertical-align: middle;

novicheG · December 6, 2010

<li><a href="#"><div><img src="../About_l.png" width="175" height="100" /></div>Contacts</a></li>

- дивы убери отсюда, - нельзя их в ссылки так вставлять

Ngels · December 6, 2010

А как мне тогда сделать, чтоб текст был под картинками?

Graph · December 6, 2010

А как мне тогда сделать, чтоб текст был под картинками?

Ну можно после картинки <br> поставить, но все зависит от контекста конечно.

Ngels · December 6, 2010

Ну можно после картинки <br> поставить, но все зависит от контекста конечно.

Да, я так и сделал, и div'ы убрал из ссылок,

но все эти действия так не принесли желаемого результата - вертикального выравнивания по нижнему краю.

К какому же, все-таки, элементу применять???

	
display: table-cell;
vertical-align: bottom;

Edited December 6, 2010 by Ngels

Ngels · December 6, 2010

Где же вы, знающие...

Помогите, не могу ничего придумать.

Пока остановился вот на таком варианте:

HTML

<div id="footer" class="plinks">

		<a href="#"><img src="../About_l.png" width="175" height="100" />Текст 1</a>
		<a href="#"><img src="../Cable_pic.png" width="350" height="200" />Текст 2</a>
		<a href="#"><img src="../Sound_pic_l.png" width="175" height="100" />Текст 3</a>
		<a href="#"><img src="../Accs_pic_l.png" width="175" height="100" />Текст 4</a>
</div>

CSS

#footer {
margin: 50px 50px 0px 50px;
width:1000px;
overflow:hidden;
}
.plinks {
}

.plinks a {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	font: "Myriad Pro";
	text-align: center;
	color: #333;
	text-decoration:none;
}

.plinks a:hover {
color: #F00;
}

.plinks img {
	display:inline-block;
	vertical-align:bottom;
	overflow: hidden;
}

.plinks img a {
display:inline-block; 
vertical-align:bottom;
margin-left:20px; 
margin-right:20px;
overflow: hidden;

}

.plinks img a:hover {
color: #F00;
}

Но не могу никак придумать, каким макаром текст внизу картинок расположить по центру... при </br> список становится вертикальным...

Edited December 6, 2010 by Ngels

novicheG · December 7, 2010

<a href="#"><img src="../About_l.png" width="175" height="100" />Текст 1</a>
<a href="#"><img src="../Cable_pic.png" width="350" height="200" />Текст 2</a>
<a href="#"><img src="../Sound_pic_l.png" width="175" height="100" />Текст 3</a>
<a href="#"><img src="../Accs_pic_l.png" width="175" height="100" />Текст 4</a>

Нет, пагади, ты этим путем зря пошел, у тебя получилась одна строка из ссылок, но т.к. тебе нужно в каждой ссылке картинку вверху+ текст внизу, разрывая их <br/> либо блочным элементом - ты разорвеш всю строку из ссылок, и она поползет. У меня не получилось через списки, честно пока не знаю как сделать это горизонтальным списком без таблиц и абсолюта. Мож кто из спецов подскажет, я ламер пока в этом деле.

Great Rash · December 7, 2010

Вопросы:

1) Почему не подходит position: absolute;?

2) Покажите скрин того, что надо получить в итоге?

3) К каким элементам вы применяли display: table-cell;?

4) Вы в курсе, что к родителю этих элементов надо применить display: table;?

5) Вы знаете, что display: table; и display: table-cell; не работают в ИЕ ниже восьмой версии?

undina · December 7, 2010

Покажите, что хотите получить в итоге? Почему позиционирование не подходит?

novicheG · December 7, 2010

Можно я спрошу в этой же теме чтоб не засорять, здесь то же самое по сути только вместо списка я вставил дивы:

<!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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style type="text/css">
.list {
	width: 600px;
	height: auto;
	float: left;	
	border: 1px dotted #565656;
}
.item {
	width: 200px;
	height: 100%;
	float: left;
	border: 1px solid #a80f0f;
}
</style>
</head>

<body>

	<div class="list">
		<div class="item item1">
			<img src="../l.png" width="175" height="100" />
		</div>
		<div class="item item2">
			<img src="../2.png" width="175" height="200" />
		</div>
	</div>

</body>
</html>

при этом (точ в точ с этого кода):

- Если у родительского блока height: auto; то дочерние блоки НЕ растягиваются по нему (у них при этом задана height: 100%) (те которые меньше высоты родителя, сам же родитель растягивается самым большим из блоков)

- Если у родительского блока фиксированная высота height: 200px; то дочерние блоки растягиваются по нему (как и желаем).

Вопрос: Почему так происходит? растянуть на всю высоту можно только позиционированный блок?

Edited December 7, 2010 by novicheG

Ngels · December 8, 2010

Покажите, что хотите получить в итоге? Почему позиционирование не подходит?

Спасибо всем за отзывчивость =)

Что-то с сервером форума наверное вчера была, или у меня косяк, никаких сообщений вчера не видел...

Хочу получить вот так:

Тут я сделал таблицей, но хочу перейти к дивам, но никак не могу сделать это "чертово" вертикальное выравнивание...

По-поводу того, что ниже ИЕ8 display:table не работает в курсе, но судя по статистике с моего сайта таких пользователей 2%, так что не критично, зато прогрессивно !)

helper · December 9, 2010

Спасибо всем за отзывчивость =)
Что-то с сервером форума наверное вчера была, или у меня косяк, никаких сообщений вчера не видел...
Хочу получить вот так:
Тут я сделал таблицей, но хочу перейти к дивам, но никак не могу сделать это "чертово" вертикальное выравнивание...
По-поводу того, что ниже ИЕ8 display:table не работает в курсе, но судя по статистике с моего сайта таких пользователей 2%, так что не критично, зато прогрессивно !)

Два процента - это много.

Каждый пятидесятый свалит с сайта ...

runet · December 10, 2010

Попробуй данный вариант:

CSS:

a img { border: none; vertical-align: baseline; }

	#categories_img { list-style: none; }
					 #categories_img li {
										font: "Myriad Pro";
										text-align: center;
										margin: 0 5px;
										display: -moz-inline-box; /*для mozilla 2*/
										display: inline-block;	   
										*zoom: 1;					 /*для IE
										*display: inline;			 */
										vertical-align: bottom;
										}
										#categories_img li a {
															  font-size: 14px;
															  font-weight: bold;
															  text-transform: uppercase;
															  color: #000;
															  text-decoration: none;
															  }
										#categories_img li a:hover { color: #999; }

html:

  
	<ul id="categories_img">
		<li><a href="#"><img src="img/250x250.gif" width="250" height="250"/><br />Contacts</a></li>
		<li><a href="#"><img src="img/125x125.gif" width="125" height="125" /><br /><Cable</a></li>
		<li><a href="#"><img src="img/290x100.gif" width="290" height="100" /><br />Sound</a></li>
	</ul>

Edited December 10, 2010 by runet

Sign In

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

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information