DrMartens Posted September 1, 2010 Report Share Posted September 1, 2010 Как отцентрировать меню по вертикали?Стиль:<style type="text/css">#menu_up { background-image:url(images/menu_bg.jpg); background-repeat:repeat-x; width:100%; float:left; text-align:center; height:40px; margin:0 auto;}#menu_up .links li, a{display:block; float:left;text-align:center;list-style-type: none;background-image:url(images/menu_bg.jpg);font-size:14px;font-family:Arial, Helvetica, sans-serif;height:100%;text-decoration:none;color:#333333;margin:0 auto;position:relative;}#menu_up a:hover{list-style-type: none;background-image:url(images/btnact.jpg);background-repeat:no-repeat;color: #FFF;display:block;font-size:14px;font-family:Arial, Helvetica, sans-serif;text-decoration:none;height:100%;margin:0 auto;}</style>Меню:<div id="menu_up"><a class="links" href="#">Link</a><a class="links" href="#">Link</a><a class="links" href="#">Link</a><a class="links" href="#">Link</a><a class="links" href="#">Link</a><a class="links" href="#">Link</a></div> Quote Link to comment Share on other sites More sharing options...
0 Great Rash Posted September 1, 2010 Report Share Posted September 1, 2010 http://forum.htmlbook.ru/index.php?showtopic=19320 Quote Link to comment Share on other sites More sharing options...
0 DrMartens Posted September 1, 2010 Author Report Share Posted September 1, 2010 http://forum.htmlbook.ru/index.php?showtopic=19320читал, но мне нужно что бы меню было заданой висоти - 40 пикселей. Пробовал тот прмер, меню никак не стает по центру вертикально. Quote Link to comment Share on other sites More sharing options...
0 klierik Posted September 1, 2010 Report Share Posted September 1, 2010 #menu_up a{line-height: 40px;} Quote Link to comment Share on other sites More sharing options...
0 ~Kitty~ Posted January 11, 2011 Report Share Posted January 11, 2011 Вот возникла та же проблема, поэтому решила не создавать новой темы.Есть горизонтальное меню на списках. Нужно внутри каждого пункта сделать вертикальное выравнивание по центру. Высота каждого пункта фиксированная. Способ, предложенный вышеКод#menu_up a{line-height: 40px;}по сути помогает, хорош только для одной строчки. А можно как-то выровнять по вертикали, если в части li 1 строчка, а в части - 2 строчки текста?...Пример на картинке:#nav li{ float:left; width:165px; height:50px; vertical-align: baseline; background:url(images/menu_item.gif) no-repeat top left; text-align:center;} Quote Link to comment Share on other sites More sharing options...
0 Great Rash Posted January 12, 2011 Report Share Posted January 12, 2011 http://forum.htmlbook.ru/index.php?showtop...st&p=159163 Quote Link to comment Share on other sites More sharing options...
0 htmlonline Posted January 13, 2011 Report Share Posted January 13, 2011 А азьве нельзя вот так<div valign="middle">menu</div> ? Quote Link to comment Share on other sites More sharing options...
0 Vlad Posted January 13, 2011 Report Share Posted January 13, 2011 htmlonline, нельзя. Quote Link to comment Share on other sites More sharing options...
Question
DrMartens
Как отцентрировать меню по вертикали?
Стиль:
<style type="text/css">
#menu_up {
background-image:url(images/menu_bg.jpg);
background-repeat:repeat-x;
width:100%;
float:left;
text-align:center;
height:40px;
margin:0 auto;
}
#menu_up .links li, a
{
display:block;
float:left;
text-align:center;
list-style-type: none;
background-image:url(images/menu_bg.jpg);
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
height:100%;
text-decoration:none;
color:#333333;
margin:0 auto;
position:relative;
}
#menu_up a:hover
{
list-style-type: none;
background-image:url(images/btnact.jpg);
background-repeat:no-repeat;
color: #FFF;
display:block;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
height:100%;
margin:0 auto;
}
</style>
Меню:
<div id="menu_up">
<a class="links" href="#">Link</a>
<a class="links" href="#">Link</a>
<a class="links" href="#">Link</a>
<a class="links" href="#">Link</a>
<a class="links" href="#">Link</a>
<a class="links" href="#">Link</a>
</div>
Link to comment
Share on other sites
7 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.