Question

我正在尝试将div元素集中到一个容器中，以便整个页面的边距相同，但我的居中方式似乎不起作用。我正在使用bootstrap和我自己的自定义css页面。

这是基本的html模板：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

    <body>
        <div class="nav">
            <div class="container">
                <ul class="pull-left">
                    <li>ONE</li>
                    <li>TWO</li>
                </ul>

                <ul class="pull-right">
                    <li>LOG IN</li>
                    <li>HELP</li>
                </ul>
            </div> <!--End nav container-->
        </div> <!--End nav-->

        <div class="container">
            <h1>header</h1>
            <p> This is a page about me</p>
        </div>

    </body>
</html>

这是我链接到它的main.css页面：

.nav li {
    display: inline; 
    color: #5a5a5a;
    font-size: 15px;
    font-weight: bold;
    padding: 14px 10px;
    text-transform: uppercase;
}

.container  {
    margin: 0 auto; 
}

我已经在堆栈和在线查看了各种答案，但似乎没有任何效果。我也尝试过使用

margin-left: auto; 
margin-right: auto;

但那些对我来说也不起作用。

Answer 1

您需要将宽度设置到容器上。

Answer 2

您需要做的就是将.container text-align属性设置为text-align: center;

.container  {
    text-align: center;
}

中心div框不起作用

2 个答案:

Fiddle