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

Question

我有一个元素，其中有两个 div 标签；一个在左侧(链接)，一个在中间(菜单)。左边的一个 div 标签工作正常，但中间的 div 标签导致我出现问题...

我的“链接”在我的家用电脑上很好地居中，但是当我用手机查看网站时，因为我的“菜单”在我的电脑上居中，所以它没有在小屏幕上居中.它实际上向右浮动。

我希望中间的 div 标签(写着“菜单”的标签)在所有设备上居中。我怎么做？

代码如下:

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>

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