Question

很难让我的标题图片居中。

body {
    font-family:Verdana, Genova, sans-serif;
    background-color:#000;  
}

divWrapper {
    width:700px;
    margin:20px auto;
}

divHeader {
    width:700px;
    background-color:#999;
}

和我的HTML ...

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Just Messing Around</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="divWrapper">
<div id="divHeader"><img src="raiderd.png" width="405" height="68"/></div>
</div>
</body>
</html>

无论我做什么，似乎都会卡在左上方......

Answer 1

＆＃34;＃＆＃34;缺少ID

#divWrapper {
    width:700px;
    margin:20px auto;
}

#divHeader {
    width:700px;
    background-color:#999;
}

Answer 2

图像不会居中，只是因为您有两个相同宽度的嵌套标签。您可以尝试使用...

#divHeader img {
    display:block;
    text-align:center;
}

<div id="divHeader"><img src="raiderd.png" width="405" height="68"/></div>

说实话，我忘记了（我正在吃晚餐）。这一切都取决于标题div的最终外观。一切都集中在哪？在这种情况下，我可以将text-align:center;放在<div>上。不过，你应该通过修补来获得它。

Answer 3

以上是正确的，#divHeader需要margin: auto;宽度必须小于包装器..

看看这个Jsfiddle。更改图像的文本并将divHeader宽度增加到图像的大小（必须仍然小于包装器）。

http://jsfiddle.net/f5yGQ/

body{
    width:90%;
}

#divWrapper {
   width:700px;
   background-color:#999;
   margin:auto;
}

#divHeader {
    width:20px;
    margin: auto;
}

您可以忽略body属性

无法集中我的标题

3 个答案: