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

Question

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

但我正在为多个“类别”创建多个 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 类，但事实并非如此

谁能帮帮我？非常感谢!

~贾斯汀范东恩

编辑

元素在 Chrome 中检查 h1 标签的“样式”:

    .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/