Question

大约十年前自学了基本的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>

Answer 1

使用保证金中心

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

问题集中在菜单上

1 个答案: