Jump to content
  • 0

Выравнивание меню из списка. Как?


Yura13
 Share

Question

Доброе время суток.

Сделал горизонтальное меню из списка. Помогите разобраться с выравниванием. Ширина фоновой картинки 1000px, высота 30px. Надо текст выровнять по горизонтале по центру и по вертикале центру. Как?

CSS

.menu{
margin: 0;
padding: 0;
float: left;
font: bold 15px Georgia;
width: 100%;
background-image:url(images/bg_navbar.gif); /* фоновая картинка 1000Х30px*/
}
.menu li{
display: inline;
}
.menu li a{
float: left;
color: #000;
padding: 5px 15px;
text-decoration: none;
}
.menu li a:visited{
color: #000;
}
.menu li a:hover, .menu li .current{
color: #FFC;
}

HTML

<ul class="menu">
<li><a href="#" title="" class="current">Главная</a></li>
<li><a href="#" title="" >Галерея</a></li>
<li><a href="#" title="">Проекты</a></li>
<li><a href="#" title="">Статьи</a></li>
<li><a href="#" title="">Контакты</a></li>
</ul>

А также как выровнять текст по вертикале по центру в дивах (div)?

vertical-align: middle - не помогает.

Посмотреть можно здесь

И еще вопрос:

div выровнял по центру margin: 0px auto;

Как сдвинуть div на 20px влево от центра?

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
А также как выровнять текст по вертикале по центру в дивах (div)?

line-height:40px; для блока с новостями, тогда можно будет внутренний H1 с помощью vertical-align двигать.

Как сдвинуть div на 20px влево от центра?

position:relative;

left:-20px;

либо вставить внутрь еще один контейнер и подвинуть его влево отрицательным маргином.

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy