html - 为什么这个 div 没有正确居中?

标签 html css layout tumblr

开始我的第一个 Tumblr 布局。 出于某种原因,这些列都偏向左侧,而不是在#content 中居中。

不确定我做错了什么......非常感谢任何帮助。

另外...如果有人看到这个有任何建议或看到做这些专栏的更好方法,我很想听听。

谢谢 山姆

代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
    text-align: center;
}
#wrap {
    height: auto px;
    width: 920px;
    margin: 15px auto;
    border: 1px black solid;
}
#header {
    margin: 10px;
}
#content {
}
#column1 {
}
#column2 {
}
#column3 {
}
#footer {
}
.title {
    font-size:25px;
}
.subtitle {
    font-size:16px;
}
.column {
    width: 300px;
    float: left;

}
</style>
<title>{title}</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="title">
{title}</div>
<div class="subtitle">
{description}</div>
</div>
<div id="content">
<div id="column1" class="column">
column1
</div>
<div id="column2" class="column">
column2
</div>
<div id="column3" class="column">
column3
</div>
</div>
<div id="footer" class="subtittle">
copyright {copyrightYears} {title}
</div>
</div>
</div>
</body>
</html>

最佳答案

您的容器宽度超过 900 像素(300 像素 x 3)。

将列宽设置为 33.3%(接近容器宽度的 1/3)。

.column {
    width:33.3%;
    float: left;
}

http://jsfiddle.net/CZ9Lw/

关于html - 为什么这个 div 没有正确居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15072444/

相关文章:

javascript - 从 JavaScript 关闭 Excel ActiveX 对象会将 excel.exe 留在内存中

javascript - JS/JQuery 隐藏元素、更改文本、显示元素

html - 网页未在移动浏览器上调整大小

r - 在 R 中使用 layout() 划分图形的线

android - 从底部滚动隐藏的 View /布局

html - 将我的 Logo Div 居中

html5 Canvas 涂鸦改变颜色

CSS @supports (::伪元素)

android - 如何更改android Activity 中的标题栏颜色?

JavaScript:如何获取用户选择,并在选择前后插入标签?