堆栈内存溢出
  繁体   English   中英

即使缩小或放大，我如何确保它保持居中？

[英]How can I make sure this stays centered, even when zoomed out or in?

 原文  2014-06-14 06:47:32  6   7    html/ css

问题描述

我的网站上的导航栏有问题。 我想要的只是让它在徽标/标语下说出它的位置 - 即使您在浏览器中缩小或放大也是如此。

这是 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

7 个解决方案

解决方案1
 1  2014-06-14 07:03:52

希望这会有所帮助.. 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;
}

解决方案2
 0  2014-06-14 06:54:41

它们没有正确居中。 使用绝对值是一种将动态文本居中的糟糕方法。 最好仅在具有精确值的 div 上使用。

最佳形式：

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

在 ul 中，使用text:align: center

JSFIDDLE

在线演示

解决方案3
 0 已采纳  2014-06-14 06:57:49

我添加了包装器来包含所有这些，并用 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>

解决方案4
 0  2014-06-14 06:58:55

将任何东西居中使用

margin: 0 auto

在您的情况下，将其设置在 #body 中

#body {
    margin:0 auto;
}

它仍然不是预期的中心，对吗？ 由于您的 float: 留在 li 中，请替换为 display: inline-block

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

这是最终的演示： http : //jsfiddle.net/jbwsT/1/

解决方案5
 0  2014-06-14 07:09:37

下面固定。

一些变化包括：

  • 导航的 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>

解决方案6
 0  2020-11-25 14:40:07

唯一对我有用的东西。

margin: 0 auto;
width: fit-content;

在你的元素上

解决方案7
 -1  2018-09-22 09:56:30

它对我有用，希望它适合您在代码末尾添加（如果您只想将页面居中，请删除 CSS 编辑器中的第一行“transform: scale(0.8)”

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 缩小页面时，如何使所有内容居中？ 缩小/缩小时如何确保内容居中 如何确保网站在缩小时仍然响应？ 当我关闭并重新打开信息 window 时，如何确保内容保持不变 如何确保文本始终位于图像顶部（即使调整大小）？ CSS：缩小时使浏览器居中 缩小浏览器时，如何制作带有居中内容的拉伸标题 我可以确保该元素保留在其他屏幕上吗？ 如何确保开/关按钮保持打开和关闭？ 如何确保长文本在圆形形状内水平和垂直居中
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM