Question

我有一个位于网页顶部的div，但div意味着水平居中。

但由于某种原因，div总是坐在左边？

你知道我怎么能让div水平居中？

如果我将“align =”center“”添加到div中，那么它会居中，但我正在寻找一种纯粹的CSS方式使其居中：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> </title>

    <style type="text/css">
    <!--
        body {
            text-align: center;
            margin: 0 auto;
            background-color: RGB(197, 155, 109);
            background-image: url("../images/bodyBk2Lite.png");
            background-repeat: repeat;
            font-family: "Arial", "Tahoma", Serif;
            font-size: 17px;
        }

        p {
            text-align: left;
        }

        #heading {
            width: 100%;
            height: 110px;
            background-image: url("../images/headingBk2Lite.png");
            background-repeat: repeat-y;
            background-color: RGB(0, 0, 0);
        }

        #headingContainer {
            width: 980px;
            height: 110px;
            text-align: right;
            background-color: red;
        }

        #headingSpacer {
            height: 15px;
        }
    -->
    </style>
</head>
<body>

    <div id="heading">
        <div id="headingContainer">
            <a href="index.html"><img src="images/headingImg.png" height="105px" alt="Select Recipes"/></a>
        </div>
    </div>

</body>
</html>

Answer 1

您可以使用自动边距，因为元素具有宽度：

 #headingContainer {
  margin: 0 auto;
  width: 980px;
  height: 110px;
  text-align: right;
  background-color: red;
}

http://jsfiddle.net/Xee6s/

Answer 2

是的保证金：0自动;很好，但你必须将text-align：center放在你的身体中，以便像IE这样的老浏览器

Answer 3

您可以通过设置左侧和右侧的边距将div与中心对齐。自动权利。这使浏览器平均分配空间

#heading
{
  width:200px;
  margin:0 auto 0 auto;
}

在jsfiddle：http://jsfiddle.net/DfXBp/1/

Answer 4

假设您正在尝试将#heading或#headingContainer div与中心对齐，只需添加其样式：

margin: 0 auto;

CSS方式集中我的div

4 个答案: