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

Posted 2023-03-05

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

【英文标题】：how can I center my text in bootstrap? [duplicate]

【发布时间】：2017-08-12 00:28:12

【问题描述】：

我有一个纯 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/

【问题讨论】：

jsfiddle.net/0zfktus3/2

从h2 和p 中取出max-width，然后将text-align:center; 添加到容器中。 Updated Fiddle

【参考方案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 了解更多关于引导对齐类

【讨论】：

@user3766930...第一个回答..好伤心.. :(

【参考方案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>

【参考方案3】：

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

h2
  text-align:center;


p
  text-align:center;

【参考方案4】：

从h2 和p 中删除max-width。

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