Question

我是CSS上的一种新手，我正在尝试制作仅由DIVs组成的布局。看看这个例子，它是我布局的紧凑版本，并显示我遇到的困难：

<html>
<head>
    <style type="text/css">
    .all .text, .all .divs {
        text-align: center
    }
    .all .divs div {
        background-color: #000;
        width: 20px;
        height: 20px;
        margin-top: 5px
    }
    </style>
</head>
<body>
    <div class="all">
        <div class="text">
            Hi! I'm align in the center!
        </div>

        <div class="divs">
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

看div class="text"与class="divs"居中对齐但class="divs"不是。我认为这会导致class="divs"中的div没有内部文本。这样对吗？

我的问题是如何将屏幕中的div {{1}}置于中心？

Answer 1

“text-align：center”属性用于居中文本，图像等。在div或其他块元素中。如果你需要将div本身居中，那么你需要使用“margin：0 auto”。但是，必须定义div的宽度，并且它必须小于用户屏幕宽度（不是100％）。

示例：

.all .text, .all .divs {
  width: 500px; margin: 0 auto;
}

.all .text, .all .divs {
  width: 90%; margin-left: auto; margin-right: auto;
}

Answer 2

您不应将text-align用于居中div，而应margin: 0 auto;

Answer 3

利用auto。浏览器将为您设置边距。在您的情况下，它就像使用以下

一样简单

.all .divs div {
    /*other stuff*/
    margin: 5px auto 0;
}

Answer 4

您可以使用：

.all, .divs, .divs div{
margin:0px auto;}

像这样，http://jsfiddle.net/EzC44/

居中空div

4 个答案: