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

Zuma · November 6, 2008

Вот код:

<div class="menu"><a href="......">Новости</a></div>

.menu {
float: left;
text-align: center;
width: 116px;
height: 28px;
border-left: 1px solid white;
border-bottom: 1px solid white;
font-weight: bold;
font-family: Verdana, sans-serif;
font-size: 10px;
color: white;
}
.menu a {
color: white;
}

Edited November 6, 2008 by Zuma

Джин · November 6, 2008

по вертикали, по моему, в div'ах нельзя выравнивать.... пользуйся padding'ом

klierik · November 6, 2008

внутри блочных объектов выравнивать текст по-вертикали нельзя (стандартными способами)

Searcher · November 6, 2008

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

css

.menu {
float: left;
width: 116px;
height: 28px;
border-left: 1px solid white;
border-bottom: 1px solid white;
font-weight: bold;
font-family: Verdana, sans-serif;
font-size: 10px;
color: white;
position: relative;
}
.menu[class] {display: table; position: static; overflow: auto;}
.menu a {
color: white;
position:absolute; 
top:50%;
left:50%;
}
.menu a[class] {display: table-cell; vertical-align: middle; text-align:center; position: static;}
.menu a span {
position:relative; 
top:-50%;
left:-50%;
}
.menu a span[class] {position: static;}

html:

<div class="menu"><a href="......"><span>Новости</span></a></div>

Edited November 6, 2008 by Searcher

mini · November 6, 2008

попробуй line-height:26px;

26px высота блока в котором нужно выровнять текст

e1f · November 6, 2008

Почитай эту тему.

Zuma · November 6, 2008

Всем спасибо!

Чтобы не создавать отделную тему, напишу тут.

Это мой первый опыт верстки веб-странички, поэтому появляется много вопросов и непонятных мне пока странностей =)

Например, как так получается, что ссылка (в одном только отдельном! диве) при обновлении страницы становится черного цвета, а стоит навести на нее мышь, как она преобретает предписанный ей цвет (ссылка с мейлом)?

Пишу только под оперу, на другие браузеры пока внимания не обращаю.

Если кому не лень, проанализируйте, плз, мой код, подскажите, где не прав, где некорректно. Спс ))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Im a Gadget</title>
<link rel="stylesheet" type="text/css" href="ima.css" />
</head> 
<body> 



<div id="site">

	<div id ="lpanel">

		<div class="imag">
		<p><a href="file://localhost/E:/ima/imagadget.html">Im a Gadget • Com</a></p>
		</div>

		<div id="user">
			<p class="us">account</p>
			<input type="text" maxlength="10" size="15" name="login" />
			<input type="password" maxlength="15" size="15" name="pass" />
			<p class="account"><a href="file://localhost/E:/ima/imagadget.html">вкл.</a> / <a href="file://localhost/E:/ima/imagadget.html">выкл.</a></p>
			<p class="account"><a href="file://localhost/E:/ima/imagadget.html">регистрация</a></p>
			<p class="account"><a href="file://localhost/E:/ima/imagadget.html">забыли пароль?</a></p>
			<p class="us">Пользователям</p>
			<ul>
				<li><a href="file://localhost/E:/ima/imagadget.html">Сделать стартовой</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">Добавить в избранное</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">Опубликовать статью!</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">Сообщить об ошибке</a></li>
			</ul>
		</div>

		<div class="nav">
		<p class="vib">Меню</p>	
			<ul>
				<li><a href="file://localhost/E:/ima/imagadget.html">форум</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">новости</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">обзоры</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">контакты</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">ссылки</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">партнерам</a></li>
			</ul>
		<br />
		<p class="vib">Каталог коммуникаторов</p>
			<ul>
				<li><a href="file://localhost/E:/ima/imagadget.html">Asus</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">Apple</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">BenQ</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">Eten</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">Gigabyte</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">Haier</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">HP</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">HTC</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">i-mate</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">Nokia</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">RoverPC</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">Samsung</a></li>
				<li><a href="file://localhost/E:/ima/imagadget.html">Sony Ericsson</a></li>
			</ul>
			<a href="file://localhost/E:/ima/imagadget.html" id="all">все производители..</a>
		</div>

	</div>



	<div id ="cpanel">

			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Новости</a></p></div>
			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Каталог устройств</a></p></div>
			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Форум</a></p></div>
			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Наши контакты</a></p></div>
			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Наши ссылки</a></p></div>
			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Реклама</a></p></div>

			<div class="element">
				<div class="top"></div>
			</div>
			<div class="element">
				<div class="top"></div>
			</div>
			<div class="element">
				<div class="top"></div>
			</div>

			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Подробнее</a></p></div>
			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Самые ожидаемые</a></p></div>
			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Подробнее</a></p></div>
			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Рейтинг</a></p></div>
			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Подробнее</a></p></div>
			<div class="menu"><p><a href="file://localhost/E:/ima/imagadget.html">Best coast</a></p></div>

	</div>



	<div id ="rpanel">

		<div class="imag"><p><a href="file://localhost/E:/ima/imagadget.html">info@Im-a-Gadget • Com</a></p></div>

	</div>



</div>
</body> 
</html>

body {
position: relative;
margin: 0;
font-family: Verdana, sans-serif;
font-size: 10px;
background: url("fon.jpg") no-repeat;
background-position: top;
}
a {
text-decoration:none;
color: white;
}
a:hover {
text-decoration: underline;
}
ul {
padding: 2px;
}
#site { 
 margin: 3px auto;
 width: 1024px;
 border: 0;
}



/* ЛЕВАЯ ПАНЕЛЬ */

#lpanel {
float: left;
background: url(bp.png) no-repeat;
width: 160px;
height: 800px;
opacity: 0.95;
}
	/* Верхушка */
.imag {
border-bottom: 1px solid white;
text-align: center;
height: 16px;
margin: 0;
padding: 0;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 11px;
}
.imag p {
margin: 4px 0 0 0;
}
.imag a {
color: white;
}
.imag a:hover {
text-decoration:none;
color: #beec05;
}
	/* Область аккаунта */
input {
margin-left: 26px;
}
#user {
border-bottom: 1px solid white;
height: 179px;
}
#user li {
color: white;
margin-left: 20px;
}
#user ul {
margin: 0;
}
#user a {
color: white;
}
.us {
text-align: center;
padding: 0;
font-size: 10px;
font-weight: bold;
margin: 6px 0 0 0;
color: #beec05;
}
.account {
text-align: left;
padding: 0;
font-size: 10px;
margin: 0 0 0 27px;
color: white;
}
	/* Область меню */
.nav {
margin: 30px 0 0 20px;
padding: 0;
}
.nav li {
margin-left: 20px;
padding: 0;
}
.nav a  {
color: #474646;
}
.nav a:hover  {
color: black;
}
.vib {
font-weight: bold;
color: #549000;
}
#all {
margin-left: 10px;
color: #549000;
}



/* ЦЕНТРАЛЬНАЯ ПАНЕЛЬ */

#cpanel {
float: left;
width: 702px;
height: 800px;

background: url(cp.png) no-repeat;
opacity: 0.95;
}
	/* Голова - Область меню */
.menu {
float: left;
text-align: center;
width: 116px;
height: 20px;
border-left: 1px solid white;
border-bottom: 1px solid white;
font-weight: bold;
font-family: Verdana, sans-serif;
font-size: 10px;
}
.menu p {
margin: 4px 0 0 0;
}
.menu a {
color: white;
}
.menu a:hover {
text-decoration:none;
color: #beec05;
}
	/* Голова - Область содержимого */
.element {
float: left;
border-left: 1px solid white;
border-bottom: 1px solid white;
width: 233px;
height: 164px;
}
.top {
margin: 2px auto;
width: 229px;
height: 160px;
background: white;
}



/* ПРАВАЯ ПАНЕЛЬ */

#rpanel {
float: left;
background: url(bp.png);

width: 160px;
height: 800px;
opacity: 0.95;
}
	/* Верхушка */
/* .imag */

Edited November 7, 2008 by Zuma

rus · November 6, 2008

Я так понял проблема в этом?


<div class="imag"><p><a href="file://localhost/E:/ima/imagadget.html">info@Im-a-Gadget • Com</a></p></div>


.imag {
border-bottom: 1px solid white;
text-align: center;
height: 16px;
margin: 0;
padding: 0;
color: white;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 11px;
}
.imag p {
margin: 4px 0 0 0;
}
.imag a {
color: white;
}
.imag a:hover {
text-decoration:none;
color: #beec05;
}

Попробуй в место color: white; прописать color: FFFFFF;

Zuma · November 7, 2008

Ага, я уже сам догадался и подправил вчера.

Спасибо!

Zuma · November 7, 2008

Друзья, помогите еще вот в чем:

Разместил див абсолютом внутри другого дива.

Как добиться растягивание родителя при увеличении внутреннего дива, чтобы он не вылезал наружу? Надеюсь понятно объяснил.

mini · November 7, 2008

Друзья, помогите еще вот в чем:
Разместил див абсолютом внутри другого дива.
Как добиться растягивание родителя при увеличении внутреннего дива, чтобы он не вылезал наружу? Надеюсь понятно объяснил.

на сколько я знаю если висит на абсотюте то не как..., но может я конечно и ошибаюсь, разве что задать родителю определенные фиксированные пареметры, и вообще абсолютом прикольно пользоваться если блок фиксированный..

Ogalig · November 10, 2008

Родителю попробуй задать позишн релятив.

Sign In

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

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information