Question

我想将页面标题完美地置于其正文中心。这对我意味着：

在div中查找内容的大小，然后将div设置为内容的大小，然后。
将div置于体内。

根据我的理解，margin: 0 auto应该以div为中心，而display: inline-block会将div的大小设置为其内容的大小。我试过这个，我不知道为什么这不起作用 - 看起来这两个属性并不能很好地相互配合。有人可以看看我的HTML / CSS，看看他们是否知道什么是错的？

HTML：

<body>
    <h1> Hi There! </h1>
</body>

CSS：

h1 {
    display: inline-block;
    margin: 0 auto;
    width: 150px;
}

Answer 1

试试这个css：

h1 {
    display: block;
    margin-left:auto;
    margin-right:auto;
    width: 150px;
}

直播示例：

http://jsfiddle.net/SL8up/

Answer 2

问题是display: inline-block;：

h1 {
    display: inline-block;
    margin: 0 auto;
    width: 150px;
}

只需将display更改为block：

h1 {
display: block;
margin: 0 auto;
width: 150px;
}

<body>
    <div class="header"><h1> Hi There! </h1></div>
</body>

使用内联CSS的完整HTML：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
h1 {
        display: block;
        margin: 0 auto;
        width: 150px;
    }
</style>
</head>
<body>
    <h1> Hi There! </h1>
</body>
</html>

如何根据内容长度居中页眉？

2 个答案: