Question

我有一个项目，里面有两个div标签;一个位于左侧（链接），一个位于中间（菜单）。左边的一个div标签正常工作，但中心的div标签是导致我出问题的标签......

我有＆＃34;链接＆＃34;在我的家用电脑上很好地集中，但当我拿起手机查看网站时，因为我已经集中了菜单＆＃34;对于我的电脑尺寸，它不是以小屏幕为中心。它实际上漂浮在右边。

我希望中间的div标签（表示＆＃34;菜单＆＃34;的标签）在所有设备的中间居中。我怎么做？

以下是代码：

CSS

    h1 {
        text-align: center;
        border: 1px solid red;
        border-radius: 25px;
    }

    body {
        background: darkgreen;
    }

    * {
        color: white;
    }

    #links {
        position: absolute;
        background: red;
        width: 100px;
        top: 70px;
        left: 10px; 
    }
    #menu {
        position: absolute;
        width: 50px;
        top: 70px;
        left: 830px;
    }

HTML

    <h1>Spanish Practice</h1>
    <div id = "links">
        <h3>Links:</h3>
        <ul>
            <li><a href = "http://www.studyspanish.com">Study Spanish</a></li>
        </ul>
    </div>

    <div id = "menu">
        <h3>words</h3>
    </div>

Answer 1

如果您正在寻找更持久的解决方案，我会使用Bootstrap

它将所有可怕的定位问题都解决了。

JSFiddle

使用bootstrap，您只需要以下代码即可获得所需的结果。不需要css。

<div class='container'>
    <div class='row'>
        <div class='col-xs-12'>
             <h1>Spanish Practice</h1>

        </div>
    </div>
    <div class='row'>
        <div class='col-xs-12'>
            <div class='col-xs-4' id="links">
                 <h3>Links:</h3>

                <ul>
                    <li><a href="http://www.studyspanish.com">Study Spanish</a>

                    </li>
                </ul>
            </div>
            <div class='col-xs-8' id="menu">
                 <h3>words</h3>

            </div>
        </div>
    </div>
</div>

＆＃13;

<iframe width="100%" height="300" src="https://jsfiddle.net/neoaptt/m39mzvak/1/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

＆＃13;

Answer 2

摆脱#menu的绝对定位和左规则，只需使用：

#menu {
    margin:auto;
    width: 50px;
    top: 70px;
}

自动边距将div放在任何屏幕上。

＆＃13;

        h1 {

          text-align: center;

          border: 1px solid red;

          border-radius: 25px;

        }

        body {

          background: darkgreen;

        }

        * {

          color: white;

        }

        #links {

          position: absolute;

          background: red;

          width: 100px;

          top: 70px;

          left: 10px;

        }

        #menu {

          margin: auto;

          width: 50px;

          top: 70px;

        }

＆＃13;

 <h1>Spanish Practice</h1>

<div id="links">
  <h3>Links:</h3>

  <ul>
    <li><a href="http://www.studyspanish.com">Study Spanish</a>

    </li>
  </ul>
</div>
<div id="menu">
  <h3>words</h3>

</div>

＆＃13;

Answer 3

使用标记<li>会使浮动向左或向右。如果它是该菜单width: 50px;中的单个链接，您可以设置：

#menu a{
margin:0 auto;
}

如果菜单选择器包含许多标记<li>，您可以向左或向右浮动它并将其设置为如上所示。另外，你可以包装它，例如：

.wrapper{
  margin:0 auto;
  width:300px;  /* width is adjusted based on numbers of `<li>` menu*/
}

<body>
    <div class="wrapper">
        <div id = "links">
            <h3>Links:</h3>
            <ul>
                <li><a href = "http://www.studyspanish.com">Study Spanish</a></li>
            </ul>
        </div>
    </div>
</body>

请注意，如果您需要它，只有在使用引导程序时才能完美定位中心。它是简单的编码，为您提供了很好的功能来处理您需要的所有东西。这是link。

Answer 4

您需要媒体查询，请查看以下内容：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

让div标签在所有计算机尺寸中居中

4 个答案: