Выравнивание внутри div'а

a_web · May 14, 2008

Здравствуйте всем,

есть простое меню, в нем слева отображается картинка, справа - ссылка на соответствующую страницу. Код следующий:

HTML
<div class="newline" style="width:100%">
 <div class="accitem"></div>
 <div class="acclabel">
 <a href="#">ПЕРСОНАЛЬНЫЕ ДАННЫЕ</a>
 </div>
</div>

CSS
.newline
{
 clear:both;
}
.accitem
{
 width:13px;
 height:18px;
 overflow:hidden;
 float:left;
 background-image:url(../img/bg05.jpg);
 background-position:center;
 background-repeat:no-repeat;
}
.acclabel
{
 padding-left:2px;
 overflow:hidden;
 height:18px;
 float:left;
}
.acclabel a
{
 color: #FFFFFF;
 font-family: Verdana;
 font-size:8px;
 text-decoration:none;
}

Вопрос в следующем, IE выравнивает элемент по нижнему краю слоя, Opera по верхнему. Пробовал поиграться с vertical-align, padding, margin - ничего не помоголо. Как можно разместить ссылку в центре div'а?

Scrum · May 14, 2008

наверно так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <title></title>
 <style type="text/css">
 /*<![CDATA[*/

 .newline
{
 border: 1px solid red;
 position: relative;
}
.accitem
{
 width:13px;
 height:18px;
 position: absolute;
 background-color: silver;
 background-image:url(../img/bg05.jpg);
}
.acclabel
{
 padding-left:13px;
 height:18px;
 overflow: hidden;
}
.acclabel a
{
 color: #000;
 font-family: Verdana;
 font-size:8px;
 text-decoration:none;
 display: block;
 float: left;
 padding: 4px 2px;
 margin: 0 2px;
 text-transform: uppercase;
 background-color: olive;
}
 /*]]>*/
 </style>
</head>

<body>
<div class="newline">
 <div class="accitem"></div>
 <div class="acclabel">
 <a href="#">персональные данные</a>
 <a href="#">персональные данные</a>
 </div>
</div>
</body>

</html>

Sign In

Выравнивание внутри div'а

Question

a_web

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information