Question

我正在尝试让我的内容在div中保持对齐...代码在下面...我做了一次这个工作但丢失了代码。现在我再也想不通了。

HTML5：

<div class="wrapper materials">
<section id="materials">

然后我做了一个文章标签然后我创建文章内容，包括h标签，p标签等。然后我关闭标签然后我关闭div

的CSS：

.materials {
    width: 80%;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: left; 
}

材质包装中的文本保持居中但我希望它左对齐。

Answer 1

首先，您使用materials作为class以及id，因此，如果您将materials的元素定位为id，比你需要使用#materials而不是.materials

#materials {
    width: 80%;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    text-align: left; 
}

除此之外，这里唯一可能的是你可能有一些更具体的选择器覆盖你的CSS块，尝试使用

#materials {
   text-align: left;
}

Answer 2

您的班级.wrapper有text-align: center。建议根据案例使用情况审查和简化样式表。例如，您希望将哪些文本置于类.wrapper的元素中？如果指定了这些情况，那么只有包装器中的那些元素才会居中。

或者，如果您希望除.wrapper以外的.materials中的所有内容都居中，请按以下方式指定：

.wrapper.materials {
    text-align: left;
    width: 80%;
    margin: 0 auto;
}

通过以这种方式组合这两者，你告诉浏览器不要选择一个类别而不是另一个类别，而是将它们视为特殊的，明确的情况。