CSS方式集中我的div

Question

我有一個div位於網頁的頂部，但div意味着b水平居中。

但由於某種原因，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 個解決方案

解決方案1
5 已采納 2011-10-28 01:07:05

解決方案2
1 2011-10-28 01:11:21

解決方案3
1 2011-10-28 01:12:15

解決方案4
1 2011-10-28 01:13:31

CSS方式集中我的div

問題描述

4 個解決方案

解決方案1 5 已采納 2011-10-28 01:07:05

解決方案2 1 2011-10-28 01:11:21

解決方案3 1 2011-10-28 01:12:15

解決方案4 1 2011-10-28 01:13:31

解決方案1
5 已采納 2011-10-28 01:07:05

解決方案2
1 2011-10-28 01:11:21

解決方案3
1 2011-10-28 01:12:15

解決方案4
1 2011-10-28 01:13:31