Question

我的网站上的导航栏出现问题。我想要的就是它可以说出它的位置，就在徽标/标语下 - 即使你缩小或放入浏览器。

这是HTML：

<html>
    <head>
        <title> Chaotix Studios </title>
        <style>
            * {
                background-color:#E6E6E6;
                font-family:Lato,Tahoma,Arial,Sans-Serif;
            }
            #coolMenu a:link{
                color:#FFFFFF;
            }
            #top{
                text-align:center;
                padding-top:100px;
            }
            #coolMenu,
            #coolMenu ul {
                list-style: none;
            }
            #coolMenu {
                float: left;
                padding-left:550px;
                padding-right:500px;
                position:absolute;
            }
            #coolMenu > li {
                float: left;
            }
            #coolMenu li a {
            display: block;
            height: 2em;
            line-height: 2em;
            padding: 0 1.5em;
            text-decoration: none;
            background-color:#000000;
            }
            #coolMenu ul {
                position: absolute;
                display: none;
            z-index: 999;

            }
            #coolMenu ul li a {
                width: 80px;
            }
            #coolMenu li:hover ul {
                display: block;
            }
            #body-main{
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div id="top">
            <div id="top-wrapper">
                <div id="logo">
                    <img src="http://i.imgur.com/4ReSeS7.png"><br>
                    <h3>Chaos Awaits.</h3><br>
                </div>
            </div>
        </div>
        <div id="body">
            <div id="body-wrapper">
                <div id="body-main">
                    <ul id="coolMenu">
                        <li><a href="#">Lorem</a></li>
                        <li><a href="#">Mauricii</a></li>
                        <li>
                            <a href="#">Periher</a>
                            <ul>
                                <li><a href="#">Hellenico</a></li>
                                <li><a href="#">Genere</a></li>
                                <li><a href="#">Indulgentia</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Tyrio</a></li>
                        <li><a href="#">Quicumque</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>

我希望它一直看起来像http://i.imgur.com/RWXYTu0.png

缩小：http://i.imgur.com/BoJV0WB.png

Answer 1

他们没有正确居中。使用绝对是一种集中动态文本的坏方法。最好只在具有确切值的div上使用。

最佳形式：

在文本中使用display:inline-block。

在ul中，使用text:align: center

JSFIDDLE

ONLINE DEMO

Answer 2

我添加了包装器以包含所有这些并使用margin：0 auto;

将其居中

<html>
<head>
    <title> Chaotix Studios </title>
    <style>
        * {
            background-color:#E6E6E6;
            font-family:Lato,Tahoma,Arial,Sans-Serif;
        }
        #wrapper {
            margin: 0 auto;
            width:  500px;
        }

        #coolMenu a:link{
            color:#FFFFFF;
        }
        #top{
            text-align:center;
            padding-top:100px;
        }
        #coolMenu,
        #coolMenu ul {
            list-style: none;
        }
        #coolMenu {
            float: left;
            position:absolute;
        }
        #coolMenu > li {
            float: left;
        }
        #coolMenu li a {
        display: block;
        height: 2em;
        line-height: 2em;
        padding: 0 1.5em;
        text-decoration: none;
        background-color:#000000;
        }
        #coolMenu ul {
            position: absolute;
            display: none;
        z-index: 999;

        }
        #coolMenu ul li a {
            width: 80px;
        }
        #coolMenu li:hover ul {
            display: block;
        }
        #body-main{
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="top">
            <div id="top-wrapper">
                <div id="logo">
                    <img src="http://i.imgur.com/4ReSeS7.png"><br>
                    <h3>Chaos Awaits.</h3><br>
                </div>
            </div>
        </div>
        <div id="body">
            <div id="body-wrapper">
                <div id="body-main">
                    <ul id="coolMenu">
                        <li><a href="#">Lorem</a></li>
                        <li><a href="#">Mauricii</a></li>
                        <li>
                            <a href="#">Periher</a>
                            <ul>
                                <li><a href="#">Hellenico</a></li>
                                <li><a href="#">Genere</a></li>
                                <li><a href="#">Indulgentia</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Tyrio</a></li>
                        <li><a href="#">Quicumque</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 3

以任何使用中心

margin: 0 auto

在您的情况下，请在#body

中设置

#body {
    margin:0 auto;
}

它仍然没有像预期的那样居中吗？因为你的浮动：左边的li，替换为display：inline-block

#coolMenu > li {
    display:inline-block;
}

以下是最终演示：http://jsfiddle.net/jbwsT/1/

Answer 4

希望这有帮助。对Css的一些修改

#coolMenu {
   text-align:center;   /*Added */
   width:100%;          /*Added */
}
#coolMenu > li {
   display: inline-block; /*Added */
}

删除了Css

#coolMenu {
   float: left;
   padding-left:550px;
   padding-right:500px;
   position:absolute;
}
#coolMenu > li {
   float: left;
}

Answer 5

修正如下。

一些变化包括：

导航的50％相对位置技巧。
简化标记。
自动左/右边距以进行居中。

  <head>
     <title> Chaotix Studios </title>
     <style>
        * {
           background-color: #E6E6E6;
           font-family: Lato,Tahoma,Arial,Sans-Serif;
        }

        #header {
           text-align: center;
           padding-top: 100px;
        }

        .container {
           width: 940px;
           margin: 0 auto;
           clear: both;
        }

        .centered {
           text-align: center;
        }

        #coolMenu,
        #coolMenu ul {
           list-style: none;
           margin: 0;
           padding: 0;
        }

           #coolMenu a:link {
              color: #FFFFFF;
           }

        #coolMenu {
           float: left;
           position: relative;
           left: 50%;
        }

           #coolMenu > li {
              float: left;
              position: relative;
              left: -50%;
           }

           #coolMenu li a {
              display: block;
              height: 2em;
              line-height: 2em;
              padding: 0 1.5em;
              text-decoration: none;
              background-color: #000000;
           }

           #coolMenu ul {
              position: absolute;
              display: none;
              z-index: 999;
           }

              #coolMenu ul li a {
                 width: 80px;
              }

           #coolMenu li:hover ul {
              display: block;
           }
     </style>
  </head>

  <body>
     <div id="header">

        <div id="logo" class="container centered">
           <img src="http://i.imgur.com/4ReSeS7.png"><br>
           <h3>Chaos Awaits.</h3><br>
        </div>

        <div id="primary-nav" class="container centered">
           <ul id="coolMenu">
              <li><a href="#">Lorem</a></li>
              <li><a href="#">Mauricii</a></li>
              <li>
                 <a href="#">Periher</a>
                 <ul>
                    <li><a href="#">Hellenico</a></li>
                    <li><a href="#">Genere</a></li>
                    <li><a href="#">Indulgentia</a></li>
                 </ul>
              </li>
              <li><a href="#">Tyrio</a></li>
              <li><a href="#">Quicumque</a></li>
           </ul>
        </div>

     </div>

     <div id="body" class="container">
        <h1>
           Test header
        </h1>
        <p>
           Test paragraph
        </p>
        <p>
           Test paragraph
        </p>
     </div>
  </body>
  </html>

Answer 6

唯一对我有用的东西。

margin: 0 auto;
width: fit-content;

在您的元素上

Answer 7

对我有用，希望对您有用在代码末尾添加（如果只想使页面居中，请删除第一行“ transform：scale（0.8）” 在CSS编辑器中

body {
transform: scale(0.8); /* for zooming */
transform-origin: 1 0; /* for center position */
transform-origin: top; /* for center to top position */
}

即使缩小或放入，我怎样才能确保它保持居中？

7 个答案:

JSFIDDLE

ONLINE DEMO