时间戳

首页 > 解决方案 > 如何使头部模块居中

html - 如何使头部模块居中

问题描述

我正在编写一个 HTML 代码，并想让 head 模块居中。我尝试了很多方法让我的头部模块居中。比如，在header标签中添加一个align，写一个head模块align css，写一个ul align css等等。但是，虽然我不工作。有没有办法解决它？这是我的代码：

    #main_nav{
            list-style: none;
            padding:0;
            overflow:hidden;
            display:table;
            height:auto;
            margin:0 auto;
            text-align: center;
            text-decoration: none;
    }

    a:link,a:visited{
            color:#ffffff;
            text-transform: uppercase;
            background-color: #bebebe;
            font-weight:bold;
            display: block;
            width:120px;
            padding: 9px;
            text-align: center;
            text-decoration: none;
    }

    a:hover,a:active{
            color:#ffffff;
            text-transform: uppercase;
            background-color:red;
            font-weight:bold;
            display: block;
            width:120px;
            padding: 9px;
            text-align: center;
            text-decoration: none;
    }

    #m-mode, #m-color, #m-attribute, #m-helpdisplay,
    #m-add, #m-hide, #m-save, #m-helpmemo{
    float:left;
    }

</style>

<ul id="main_nav">
    <li id="m-mode">        <a href="#mode"         value="Mode"         id="btn-displayMode">mode</a></li>
    <li id="m-color">       <a href="#color"        value="Color"        id="btn-colorMode">color</a></li>
    <li id="m-attribute">   <a href="#attribute"    value="Attribute"    id="btn-attribute">attribute</a></li>
    <li id="m-helpdisplay"> <a href="#help_display" value="Help_display" id="btn-help_display">help_display</a></li>

    <li id="m-add">         <a href="#add_memo"     value="Add Memo"     id="btn-addMark">add_memo</a></li>
    <li id="m-hide">        <a href="#hide_memo"    value="Hide"         id="btn-displayNote">show / hide</a></li>
    <li id="m-save">        <a href="#save_memo"    value="Save"         id="btn-saveNote">save_memo</a></li>
    <li id="m-helpmemo">    <a href="#help_memo"    value="Help_memo"    id="btn-help_memo">help_memo</a></li>
</ul>

标签： htmlcss

解决方案

这是您的解决方案：

只需根据您的喜好自定义它:)

   <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .container {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #main_nav {
        list-style: none;
        padding: 0;
        overflow: hidden;
        display: table;
        text-align: center;
        text-decoration: none;
      }

      a:link,
      a:visited {
        color: #ffffff;
        text-transform: uppercase;
        background-color: #bebebe;
        font-weight: bold;
        display: block;
        width: 120px;
        padding: 9px;
        text-align: center;
        text-decoration: none;
      }

      a:hover,
      a:active {
        color: #ffffff;
        text-transform: uppercase;
        background-color: red;
        font-weight: bold;
        display: block;
        width: 120px;
        padding: 9px;
        text-align: center;
        text-decoration: none;
      }

      #m-mode,
      #m-color,
      #m-attribute,
      #m-helpdisplay,
      #m-add,
      #m-hide,
      #m-save,
      #m-helpmemo {
        float: left;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <ul id="main_nav">
        <li id="m-mode">
          <a href="#mode" value="Mode" id="btn-displayMode">mode</a>
        </li>
        <li id="m-color">
          <a href="#color" value="Color" id="btn-colorMode">color</a>
        </li>
        <li id="m-attribute">
          <a href="#attribute" value="Attribute" id="btn-attribute"
            >attribute</a
          >
        </li>
        <li id="m-helpdisplay">
          <a href="#help_display" value="Help_display" id="btn-help_display"
            >help_display</a
          >
        </li>

        <li id="m-add">
          <a href="#add_memo" value="Add Memo" id="btn-addMark">add_memo</a>
        </li>
        <li id="m-hide">
          <a href="#hide_memo" value="Hide" id="btn-displayNote">show / hide</a>
        </li>
        <li id="m-save">
          <a href="#save_memo" value="Save" id="btn-saveNote">save_memo</a>
        </li>
        <li id="m-helpmemo">
          <a href="#help_memo" value="Help_memo" id="btn-help_memo"
            >help_memo</a
          >
        </li>
      </ul>
    </div>
  </body>
</html>

如果您遇到任何问题，请告诉我。

推荐阅读