Css 铁路超高居中并适当调整文字和div

嘿，我正试图将我的文本集中在一个div中，同时在我的内容区域中放置三个div，但不知怎的，这不起作用

HTML

---

我还想补充一点，我是HTML5和CSS的新手，如果这个问题听起来很愚蠢，我很抱歉。

首先，您的每个div上都有一个额外的结束标记，它是

\works

div的直接子对象

删除这些无关的结束标记后，要使文本居中，请将

text align:center

添加到

div#works

css:

div#works {
    margin-top: 8px;
    border-top: 2px solid #DADADA;

    /* add this */
    text-align: center;
}

#works

div的子级将继承其文本对齐属性

您的div没有正确对齐，因为中间一个没有浮动，第三个div的页边距顶部为300px，而其他两个div的页边距顶部为10px

不必为这些元素中的每一个创建新规则，因为它们都是

#works

div的子元素，您可以创建一个更通用的规则，只选择

#works

div的子元素：

#works > div {
    float: left;
    width: 300px;
    height: 300px;
    margin-top: 10px;
    border: 1px dotted #333;
}

在这种情况下，

选择器仅选择

#works

div的直接子级

---

还有一个建议：您不需要在id选择器前面加上元素名。特别是由于id在页面上只出现一次，所以用元素对选择器进行进一步分类是多余的

哦!！伟大的谢谢！你说我没有中间的那个浮动，但是我需要写什么才能把三个div都放进去，而不是只有两个div？我修正了第三个的上边距，但是它仍然在下，不在其他的边上！我发现第二个div上的“右边距：自动”；似乎导致第三个div位于下方而不是旁边。但是我需要它位于第二个div的中心，不是吗？这可能是因为container div不够大，无法容纳子div，因为它们的绝对宽度都是300px。为了确保这三个元素都能放入容器中，您可以将子元素的宽度更改为33.333%，使每个元素占据其父元素的1/3。将边上的边距设置为“自动”，仅使父元素中的单个元素居中，如果在左侧和右侧也应有div，则不会真正帮助您处理基本结构。

div#works {
    margin-top: 8px;
    border-top: 2px solid #DADADA;

    /* add this */
    text-align: center;
}

#works > div {
    float: left;
    width: 300px;
    height: 300px;
    margin-top: 10px;
    border: 1px dotted #333;
}