CSS到我的div中心

I have a div that sits at the top of a webpage, but the div is meant to b centred horizontally.

我有一个div，它位于页面的顶部，但是div是指向以水平居中的b。

But for some reason the div always sits to the left?

但是出于某种原因，div总是在左边?

Do you know how I can get the div to sit centred horizontally?

你知道我怎样才能使div保持水平居中吗?

If I add "align="center"" to the div then its sits centred but I am looking for a pure CSS way to make it centred:

如果我在div中添加"align="center"那么它的坐位居中但我正在寻找一种纯粹的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>

4 个解决方案

#1

You can use an automatic margin as the element has a width:

你可以使用自动边距作为元素的宽度:

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

http://jsfiddle.net/Xee6s/

4 个解决方案

#1

更多相关文章

随机推荐