Элементы панели навигации по центру - PullRequest
0 голосов
/ 12 августа 2010
<div id="wrapper" class="hfeed">
<div id="access">
  <div id="menu">
    <ul>
      <li class="page_item page-item-2"><a title="About" href="/?page_id=2">About</a></li>

      <li class="page_item page-item-20"><a title="Support" href="/?page_id=20">Support</a></li>

      <li class="page_item page-item-22"><a title="Links" href="/?page_id=22">Links</a></li>

      <li class="page_item page-item-47"><a title="About" href="/?page_id=47">About</a></li>
    </ul>
  </div>
</div><!-- #access -->
</div>

Мой текущий CSS:

div#menu {
background:#000;
height:1.5em;
margin:1em 0;
}

div#menu ul,div#menu ul ul {
line-height:1;
list-style:none;
margin:0;
padding:0;
}

div#menu ul a {
display:block;
margin-right:1em;
padding:0.2em 0.5em;
text-decoration:none;
}

div#menu ul ul ul a {
font-style:italic;
}

div#menu ul li ul {
left:-999em;
position:absolute;
}

div#menu ul li:hover ul {
left:auto;
}

Это мое меню, однако я не уверен, как его центрировать по центру страницы.

Ответы [ 3 ]

7 голосов
/ 12 августа 2010

Как и то, что Hitautodestruct сказал, что есть два пути, но вы должны описать, что вы хотите.

Хотите, чтобы весь центр навигационного блока был выровнен?
Если это так, вы можете сделать это в CSS (измените ширину на то, что вам нужно):

div#menu {
    width:500px;
    margin: 0px auto;
}

Хотите ли вы, чтобы содержимое внутри навигации было центрировано?
Если это так, то добавьте это к вашему CSS:

ul {
    text-align:center;
}

Если это не то, что вы ищете, пожалуйста, опишите подробнее! Приветствия

0 голосов
/ 12 августа 2010

Если вы хотите центрировать его на сетке х, вы должны использовать простую технику авто полей:

  1. Установите ваше тело так, чтобы оно выравнивало текст по центру:
    body{text-align:center;}

  2. Установите свой контейнер с автоматическим полем влево и вправо, а также, чтобы он выровнял весь текст обратно влево
    #wrapper{margin:0 auto;text-align:left;}

С вертикальной стороны немного сложнее следовать этой статье:
http://phrogz.net/css/vertical-align/index.html

0 голосов
/ 12 августа 2010

попробуйте использовать этот атрибут css: text-align и vertical-align
http://www.w3schools.com/css/pr_pos_vertical-align.asp
http://www.w3schools.com/CSS/pr_text_text-align.asp
Я не уверен, что ваш html - это страница входа или нет, поэтому я не могу отредактировать css для вас, попробуйте сделать это самостоятельно, если это возможно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...