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

从ExecutorService和max-width移除h2。

将一类p添加到容器中。

Answer 2

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

请参阅此fiddle

.container的更新HTML将如下

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

请阅读docs以了解有关 Bootstrap对齐类的更多信息

Answer 3

将“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 4

你可以简单地使用css将它在所有后续代码的中心对齐到你的css

h2{
  text-align:center;
}

p{
  text-align:center;
}

如何在引导程序中居中文本？

4 个答案:

请参阅此fiddle