css 标题< p>部分中的标记无法正确居中对齐

7kqas0il 于 2023-04-08 发布在其他

关注(0)|答案(5)|浏览(183)

<p>标签不能正确对齐，我不知道为什么。请检查我的代码，看看我哪里出错了。
你可以在图片中看到，对齐略有偏离。
添加的CSS是我认为与该部分相关的内容。我没有编写下面的代码，只是尝试编辑。

#hero-area2 .contents {
    padding: 200px 0 130px;
  }
  
  #hero-area2 .contents h1 {
    color: rgb(38, 211, 125);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 25px;
  }
  
  #hero-area2 .contents p {
    font-size: 14px;
    color: rgb(38, 211, 125);
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.5px;
    text-align: center;
  }
  
  #hero-area2 .contents .btn {
    margin: 25px 25px 0px 0px;
    text-transform: uppercase;
  }

<div class="container">
      <div class="row justify-content-md-center">
        <div class="col-md-10">
          <div class="contents text-center">
            <h1 class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="0.3s">Kuvumela Amandla</h1>
            <p class="lead  wow fadeIn" data-wow-duration="1000ms" data-wow-delay="400ms">Our Service Offering</p>
            <a href="contact.html" class="btn btn-common wow fadeInUp" data-wow-duration="1000ms"
              data-wow-delay="400ms">CONTACT US</a>
          </div>
        </div>
      </div>
    </div>

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-md-10">
      <div class="contents text-center">
        <h1 class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="0.3s">Kuvumela Amandla</h1>
        <p class="lead  wow fadeIn" data-wow-duration="1000ms" data-wow-delay="400ms">Our Service Offering</p>
        <a href="contact.html" class="btn btn-common wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="400ms">CONTACT US</a>
      </div>
    </div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/67884354/my-p-tag-in-my-title-section-wont-center-align-properly

5条答案

按热度按时间

yyyllmsg1#

我想，在p标记中没有问题。我猜，你正在使用bootstrap，并且你取了一列。col-md-10。并且该列不退出中心。USE .col-md-10.offset-md-1我想，它会工作

赞(0）回复(0）举报 2023-04-08

kx7yvsdv2#

我不明白你的问题，但我尝试这样的CSS代码：显示：网格对齐项：中心

justify-content: center
background-color: blue
height: 100px
width: 200px

对不起，我只学了一个月的css

赞(0）回复(0）举报 2023-04-08

fdbelqdn3#

#hero-area2 .contents {
    padding: 200px 0 130px;
  }
  
  #hero-area2 .contents h1 {
    color: rgb(38, 211, 125);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 25px;
  }
  
  #hero-area2 .contents p {
    font-size: 14px;
    color: rgb(38, 211, 125);
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.5px;
    text-align: center;
  }
.kon{
       text-align: center;
}
  
  #hero-area2 .contents .btn {
    margin: 25px 25px 0px 0px;
    text-transform: uppercase;
  }

<div class="container">
      <div class="row justify-content-md-center">
        <div class="col-md-10">
          <div class="contents text-center">
            <h1 class="wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="0.3s">Kuvumela Amandla</h1>
            <p class="kon" data-wow-duration="1000ms" data-wow-delay="400ms">Our Service Offering</p>
            <a href="contact.html" class="btn btn-common wow fadeInUp" data-wow-duration="1000ms"
              data-wow-delay="400ms">CONTACT US</a>
          </div>
        </div>
      </div>
    </div>

赞(0）回复(0）举报 2023-04-08

xoefb8l84#