Прижатие текста к нижней границе внутри DIV

Kaylang · February 15, 2008

Недавно начал изучать CSS и вот сейчас столкнулся с такой проблемой: Надо, чтобы текст распологался в нижней части блока DIV.

Пытался искать на различных сайтах, но везде обсуждается вертикальное выравнивание по центру.

Кто-нить из местных гуру может помочь в этом вопросе?

musulman · February 16, 2008

я всегда делаю отступы с верху :rolleyes: не реальный метод самого бесит.

Иван Шумов · February 16, 2008

слой фиксированной высоты?

Kaylang · February 16, 2008

слой фиксированной высоты?

Да, слой фиксированной высоты 70px, но применение

line-height:70px;
display: table-cell;
vertical-align: bottom;

в ИЕ, Опере и ФФ дает различные результаты. В ИЕ надпись остается в средней части блока, В Опере и ФФ опускается вниз, но на разную высоту.

Kaylang · February 16, 2008

ЗЫ. Выложу код, дабы было понятнее.

CSS:

#menu {
	border: 2px solid #cacaca;
	background-color: #FFFFFF;
	left: 20px;
	margin: 0px;
	padding: 2px;
	height: 75px;
	width: 850px;
	position: relative;
}
#my_menu {
	background:url(img/menu_tab.png) repeat;
	border:0px solid #444444;
	background-color:#FFFFFF;
	margin:0px;
	padding:0px;
	height:75px;
	width: 850px;
}
#bot_home{
	background:url(img/icon_home.png) no-repeat;
	background-position: top center;
}

.bot_menu{
	border:0px solid #444444;
	height: 70px;
	width: 70px;
}

.bot_menu h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	margin: 0px;
	padding: 0px;
	color: #029910;
	line-height:70px;
	display: table-cell;
	vertical-align: bottom;
	text-align: center;
}

HTML:

<!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="en">

[skip]

<div id="menu">   // контейнер меню, в основном нужен для создания белой рамки с тенью. (тень еще доделаю)
	<div id="my_menu"> // контейнер содержит кнопки меню.
		<div id="bot_home" class="bot_menu"> // кнопка меню HOME. id - используется для задания особенностей кнопки
												// (фонового рисунка), class - для задния общих параметров всех кнопок.
			<h1><p>HOME</p></h1>
		</div>
	</div>
</div>

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

musulman · February 16, 2008

слой фиксированной высоты?

:rolleyes: без этого нельзя, да и с ним не понятно что получается не когда не работало!!!

у меня оно работает только в таблицах

Иван Шумов · February 16, 2008

блин, а display:table к ослу неравнодушен... похоже вариант один - паддинги мучать

Kaylang · February 16, 2008

блин, а display:table к ослу неравнодушен... похоже вариант один - паддинги мучать

Паддинги тоже дают разный результат. В Опере и ФФ смещение больше, в ИЕ7 меньше. :rolleyes:

Видимо придется лепить в каждую кнопку таблицу, чего не хотел делать.

Практичный Gendo · February 17, 2008

Дабы новые темы не плодить задам вопрос здесь.

А если просто подвинуть текст

-ами сверху или снизу ? :/

Или valign=top

Спасибо

Sign In

Прижатие текста к нижней границе внутри DIV

Question

Kaylang

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

musulman

Link to comment

Share on other sites

Иван Шумов

Link to comment

Share on other sites

Kaylang

Link to comment

Share on other sites

Kaylang

Link to comment

Share on other sites

musulman

Link to comment

Share on other sites

Иван Шумов

Link to comment

Share on other sites

Kaylang

Link to comment

Share on other sites

Практичный Gendo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information