如何在引导程序中居中我的文本？ [复制]

Question

我有一个纯 html 代码：

    section.cta, section.cta2, section.cta3, section.cta4 {
      position: relative;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
      background-position: center;
      padding: 250px 0;
    }
    section.cta .cta-content, section.cta2 .cta2-content, section.cta3 .cta3-content,  section.cta4 .cta4-content {
      position: relative;
      z-index: 1;
    }
    section.cta .cta-content h2, section.cta2 .cta2-content h2, section.cta3 .cta3-content h2, section.cta4 .cta4-content h2 {
      margin-top: 0;
      margin-bottom: 25px;
      color: black;
      max-width: 450px;
      font-size: 50px;
    }
    
    section.cta .cta-content p  {
      color: black;
      max-width: 450px;
      font-size: 20px;
    }
    
    section.cta {
      background-image: url('https://cdn1.tnwcdn.com/files/2011/08/bliss.jpg');
    }
    
    @media (min-width: 768px) {
      section.cta .cta-content h2, section.cta2 .cta2-content h2, section.cta3 .cta3-content h2, section.cta4 .cta4-content h2 {
        font-size: 80px;
      }
    }
    section.cta .overlay {
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      left: 0;
    }

<section class="cta">
        <div class="cta-content">
            <div class="container">
                <h2>this is header</h2>
                <p>this is some other text.</p>
            </div>
        </div>
        <div class="overlay"></div>
    </section>

结果是一个具有漂亮背景和左对齐文本的页面。

文本基本上是这样的：

|   this is header                                   |
|   this is some other text.                         |

当用户全屏查看网页时，它位于背景的最左侧。我想改变它，使文本像这样可见：

|                  this is header                    |
|              this is some other text               |

我该怎么做？

我的 jsfiddle 在这里：

https://jsfiddle.net/0zfktus3/

Answer 1

您可以添加一个引导类 text-center 以使元素内的所有文本居中。

看到这个fiddle

.container 的更新后的 HTML 如下

    <div class="container text-center">
        <h2>this is header</h2>
        <p>this is some other text.</p>
    </div>

请阅读docs 了解更多关于引导对齐类

Answer 2

将“text-center”类添加到容器 div 中。

<section class="cta">
     <div class="cta-content">
        <div class="container text-center">
            <h2>this is header</h2>
            <p>this is some other text.</p>
        </div>
    </div>
    <div class="overlay"></div>
</section>

Answer 3

您可以简单地使用 css 将其居中对齐所有以下代码到您的 css

h2{
  text-align:center;
}

p{
  text-align:center;
}

Answer 4

从h2 和p 中删除max-width。

将text-center的类添加到容器中。