Проблемы с центрированием меню

Question

Проблемы с центрированием меню

0

После обучения базовому HTML/CSS около десяти лет назад, я теперь возвращаюсь к этому для проекта на работе.

В настоящее время я создаю концепцию для сайта, который будет размещаться внутри нашей сети.

У меня три вопроса/вопросы:

В настоящий момент я стараюсь, чтобы все было сосредоточено: логотип, текст и сетка меню. Мне трудно понять, что я сделал неправильно. Я попытался пройти через каждую строку CSS, но безрезультатно. В настоящее время я использовал padding-left: 15em; чтобы вывести меню в центр.
Я также пытаюсь вертикально центрировать текст в сетке меню. Использование vertical-align: middle; не работает, но line-height: Xem; но только для однострочных ссылок. Там, где есть вторая строка, эта строка не видна.
Я был бы признателен, если кто-нибудь сможет осветить любые очевидные ошибки, которые я сделал в своем коде. Я не прошу и не ожидаю, что кто-то перепишет то, что я сделал, но если у кого-нибудь есть предложения/советы, чтобы помочь расширить мое понимание, я был бы очень благодарен.

Вот мой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Process Guides</title>
  <style type="text/css">

  img.logo
    {
    position: absolute;
    top: -30em;
    bottom: 0em;
    left: 0em;
    right: 0em;
    margin: auto;
    }

  body {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
    color: #001f5e;
    }

  h1 {
    font-size: 20pt;
    text-align: center;
    padding-top: 7em;
    }

  line {
    color: #b3b3b3;
    padding-left: 17em;
    }

  h3 {
    font-size: 10pt;
    color: #828282;
    padding-left: 21em;
    }

  #menu ul
    {
    list-style-type: none;
    width: 70em;
    padding-top: 0em;
    padding-left: 17em;
    text-align: center;
    }

  #menu li
    {
    float: left;
    width: 15em;
    padding: .5em;
    line-height: 1.6em;
    }

   br
    {
    clear: left;
    }

  #menu a
    {
    font-size: 15pt;
    display: block;
    color: #ffffff;
    background-color: #10167d; 
    width: 11em;
    height: 2.5em;
    line-height: 2.5em;
    padding: .5em;
    text-decoration: none;
    transition: .2s;
     -webkit-transition: .2s;
     -o-transition: .2s
     -moz-transition: opacity .2s
    }

  #menu a em
    {
    font-size: 12pt;
    }

  #menu a:hover
    {
    color: #ffffff;
    background-color: #00b0f0;
    }


  </style>
</head>

<body>

<h1>
SELECT A CATEGORY:
</h1>

<img class="logo" src="./CCOGuidesLogo.png" width="299" height="121" alt="CCO Guides"/>

<!-- Site navigation menu -->

<div id="menu">
   <ul>
      <li><a href="./SubMenuGrid.html">Link One</a></li>
      <li><a href="./SubMenuGrid.html">Link Two</a></li>
      <li><a href="./SubMenuGrid.html">Link Three</a></li>
   </br>
      <li><a href="./SubMenuGrid.html">Link Four</a></li>
      <li><a href="./SubMenuGrid.html">Link Five</a></li>
      <li><a href="./SubMenuGrid.html">Link Six</a></li>
   </br>
      <li><a href="./SubMenuGrid.html">Link Seven</a></li>
      <li><a href="./CCOGuide5.html">Link Eight</a></li>
      <li><a href="./CCOGuide5.html">Link Nine</a></li>
   </br>
      <li><a href="./CCOGuide5.html">Link Ten</a></li>
      <li><a href="./SubMenuGrid.html">Link Eleven</a></li>
      <li><a href="./SubMenuGrid.html">Link Twelve</a></li>
   </ul>
</div>

<br>
<br>

<line>
________________________________________________________________________________________________
</line>

<h3>
<i>Information about this site.</i>
<br><u>Report a problem</u>
<br>Last updated: Monday 21 October 2013
</h3>

</body>
</html>

user2902846 21 окт. 2013, в 16:30

Источник

0

использовать поле: 0 авто; и уберите ваши отступы, также я бы рекомендовал использовать% для вашей ширины вместо EMS
user934902 21 окт. 2013, в 13:43

Теги:

html

css

1 ответ

Ещё вопросы

использовать поле: 0 авто; и уберите ваши отступы, также я бы рекомендовал использовать% для вашей ширины вместо EMS

user934902 · Answer 1 · 2013-10-21T11-35-00.000Z

использовать маржу к центру

  #menu ul
    {
    list-style-type: none;
    width: 70em; /*consider changing to %*/
    margin: 0 auto;
    text-align: center;
    }