文本对齐：居中；给我和 text-align: right;为什么？

Question

我正在做一个小项目，细节并不重要 :P

但我正在为多个 'categories' 创建多个 div。喜欢服务、联系方式等

但我正在努力调整我的 <h1 class="h1-contact">。但由于某些原因它不起作用..

我已经尝试用这个问题查看其他主题，但不知何故这些答案对我不起作用。

CSS

.h1-contact {
  font-size: 30px;
  line-height: 1.8;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

HTML

<hr />
<br>
<div id="02">
<h1 class="h1-contact">Contact</h1>
<p>Hi</p>

我已经尝试在 Element Inspect 中查看是否有其他东西妨碍了我的 h1-contact class，但没有

有人能帮帮我吗？非常感谢！

~贾斯汀范东恩

编辑

检查 h1 标签 Chrome 中的 'styles' 元素：

    .h1-contact {
        font-size: 30px;
        line-height: 1.8;
        text-transform: uppercase;
        font-family: "Montserrat", sans-serif;
        text-align: center;
    }

*ALL THIS IS STRIKED IN CHROME*
    .h1, h1 {
        font-size: 36px;
    }
    .h1, .h2, .h3, h1, h2, h3 {
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        font-family: inherit;
        font-weight: 500;
        line-height: 1.1;
        color: inherit;
    }
    h1 {
        margin: .67em 0;
        font-size: 2em;
    }
    h1 {
        font-size: 30px;
        line-height: 1.8;
        text-transform: uppercase;
        font-family: "Montserrat", sans-serif;
    }

另一个编辑

以下是一些可能会派上用场的链接：

JSFiddle：https://jsfiddle.net/justinvandongen/8Lyowreo/ 项目：http://justthinq.justinvandongen.nl

Answer 1

这里的问题只是缺少或错位关闭 </div>。导致 h1 右对齐的是在最后一个 col-sm-6 div 之后，但是 <div id="01"> 中也缺少一个，因此 <div id="02" 嵌套在其中.我建议运行您的 html 通过解析器来验证任何其他缺失的结束元素。

我还为 <div id="02" class="clearfix"> 添加了一个 clearfix，以确保 div 的高度迫使底部的接触部分从正确的位置开始。

这个 JSFiddle 应该涵盖我们所讨论的内容。我刚刚根据你最后的评论更新了它。

https://jsfiddle.net/khristopherallen/vufhju4n/2/

文本对齐：居中；给我和 text-align: right;为什么？

text-align: center; gives me and text-align: right; why?

html

css

text-align