0

在大约十年前自学了基本的 HTML / CSS 之后，我现在又回到了这个工作项目中。

我目前正在为在我们公司网络内部托管的网站构建一个概念。

我有三个问题/问题：

  1. 目前，我正在特别尝试让所有内容居中：徽标、文本和菜单网格。我很难弄清楚我做错了什么。我试图通过每一行 CSS 但无济于事。目前我习惯padding-left: 15em;将菜单推到中心。

  2. 我还试图将菜单网格中的文本垂直居中。使用vertical-align: middle;不起作用但line-height: Xem;确实起作用，但仅适用于单行链接。在有第二行的地方，该行不可见。

  3. 如果有人能指出我在代码中犯的任何明显错误，我将不胜感激。我没有要求也不希望任何人重写我所做的事情，但如果有人有任何建议/建议来帮助扩大我的理解，我将非常感激。

这是我的代码：

<!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>
4

1 回答 1

1

使用边距居中

  #menu ul
    {
    list-style-type: none;
    width: 70em; /*consider changing to %*/
    margin: 0 auto;
    text-align: center;
    }
于 2013-10-21T13:45:05.383 回答