Вопрос по vertical-align

[hikc]

<div id="menu">
<ul class="menu">
<li class="level1 item1 first active current">
<li class="level1 item2">
<li class="level1 item3">
<li class="level1 item4">
<li class="level1 item5">
<li class="level1 item6">
<li class="level1 item7">
<li class="level1 item8">
<li class="level1 item9 last">
<a href="/ru/about-us.html" class="level1 item9 last">
<span>О НАС</span>
</a>
</li>
<li class="background" style="width: 111px; visibility: visible; opacity: 0.7; left: -81px">
</ul>
</div>

не получается отцентровать текст "O Нас" по вертикали, уже везде понавтыкал vertical-align:middle; но без результата...


CSS

div#menu {
position: absolute;
top: 160px;
/**left: 100px;
width: 85%;**/
height: 40px;
margin-left: 0px;
text-align:center;
vertical-align:middle;
}


div#menu li a {
float: left;
display: block;
position: relative;
width: 101px;
height: 40px;
padding: 0px 5px 0px 5px;
/*line-height: 30px;*/
overflow: hidden;
font-size: 130%;
font-weight: bold;
color: #ffffff;
text-decoration: none;
z-index: 4;
text-align:center;
vertical-align:middle;

}


div#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
float: left;
vertical-align:middle;





вот что показывает DragonFly

div#menu li a {
color: #ffffff;
font-size: 130%;
font-weight: 700;
text-align: center;
}

a:hover {
color: #eb7800;
}

a:link, a:visited {
color: #e15000;
}

a {
color: #0000cc;
}
inherited from ul

div#menu ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}

ul {
list-style-position: outside;
list-style-type: disc;
}
inherited from div

div#menu {
text-align: center;
}
inherited from body

body.font-large {
font-size: 13px;
}

body {
color: #646464;
font-family: "Trebuchet MS", "Arial", "Helvetica", sans-serif;
font-size: 12px;
line-height: 150%;
}
inherited from html
default values
html {
direction: ltr;
}

 

[Maxchen]

Центрируйте содержимое LI при помощи padding и будет Вам счастье.

ul.menu li{
padding:10px 5px;
}

div#menu li a {
float: left;
...

-- БРРР....

уже везде понавтыкал vertical-align:middle; но без результата

и не ждите результата, vertical-align актуально для таблиц.

 

[Snickers]

для выравнивания по вертикали с помощью свойства vertical-align, объект должен быть ячейкой таблицы.
этого можно добиться с помощью

display:table-cell;

но если текст однострочный, для выравнивания я бы по рекомендовал свойство

line-height:высота кнопки px;

 

[hikc]

блин, точно, padding, первая верстка с блоками.... а все таблицами мыслю
спасибо!

 

[hikc]

Центрируйте содержимое LI при помощи padding и будет Вам счастье.

ul.menu li{
padding:10px 5px;
}

div#menu li a {
float: left;
...

-- БРРР....

А как это сделать если текст не однострочный?

уже везде понавтыкал vertical-align:middle; но без результата

и не ждите результата, vertical-align актуально для таблиц.

 

[BaNru]

А что это вы тут делаете? (с)

Если заранее известна высота блока, в данном случае SPAN, то можно выровнять по высоте примерно таким образом (для <A> тоже можно использовать, но только для чего нить одного):

span {
	position: relative;
	height: 16px;
	top: 50%;
	margin-top: -8px;
	display: block; /* Не обязателен для многих тегов, но лучше подстраховаться и превратить элемент в блочную модель */
}

Вот таким образом и будет достигнут параметр vertical-align:middle :biggrin:
Так же, обращаю внимания, что в разных браузерах работает по разному, т.к. разные браузеры обрабатывают по разному margin.

 

[hikc]

vertical-align on other elements

Technically, this CSS attribute doesn't go on any other kinds of elements. When the novice developer applies vertical-align to normal block elements (like a standard <div>) most browsers set the value to inherit to all inline children of that element.
So how do I vertically-center something?!

If you are reading this page, you're probably not as interested in why what you were doing is wrong. You probably want to know how to do it properly.
Method 1

The following example makes two (non-trivial) assumptions. If you can meet these assumptions, then this method is for you:

You can put the content that you want to center inside a block and specify a fixed height for that inner content block.
It's alright to absolutely-position this content. (Usually fine, since the parent element inside which the content is centered can still be in flow.

If you can accept the above necessities, the solution is:

Specify the parent container as position:relative or position:absolute.
Specify a fixed height on the child container.
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
Set margin-top:-yy where yy is half the height of the child container to offset the item up.

An example of this in code:

<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>


Method 2

This method requires that you be able to satisfy the following conditions:

You have only a single line of text that you want to center.
You can specify a fixed-height for the parent element.

If you can accept the above necessities, the solution is:

Set the line-height of the parent element to the fixed height you want.

An example of this in code:

<style type="text/css">
#myoutercontainer2 { line-height:4em }
</style>
...
<p id="myoutercontainer2">
Hey, this is vertically centered. Yay!
</p>

1 метод не помог, в силу уже сделанной верстки....

 

[Maxchen]

А как это сделать если текст не однострочный?

так ведь к тагу LI применим перенос строк - либо таагом <br/>, либо же будет автоперенос если выставлена ширина LI (ну или ширина UL)

css

ul#mylist{
margin:0;
padding:0;
list-style:none;
width:30px;
}
ul#mylist li{
margin:0;
padding:3px 0 3px 5px;
width:28px;
}

html

<ul id="mylist">
<li>some text 1...</li>
<li>some text 2...</li>
</ul>