Блог

Главная - Вопросы по программированию - Почему мой первый титул не в центре, как второй титул?

Почему мой первый титул не в центре, как второй титул?

#html #css

Вопрос:

Я хотел бы правильно центрировать свой заголовок Learn About Us , как для заголовка What we do , потому что, я думаю, есть задержка с изображением?

введите описание изображения здесь

Я не понимаю, как центрировать, как в этом примере:

Здесь заголовки выровнены правильно.

введите описание изображения здесь

Я заранее благодарю вас за вашу помощь и ваше время.

     h2 {
      font-size: 2.5rem;
      color: rgb(28, 19, 37);
      margin: 0;
    }

    p {
      color: rgb(134, 134, 134);
      margin: 1rem 0;
      line-height: 1.5;
    }

    button {
      outline: none;
      border: none;
      border-radius: 0.25rem;
      background: rgb(28, 19, 37);
      color: #F7CAC9;
      font-size: 1rem;
      letter-spacing: 0.5px;
      text-decoration: none;
      padding: 1rem 1.5rem;
    }

    .container {
      display: flex;
      font-family: sans-serif;
      max-width: 1000px;
      margin: 2rem auto;
    }

    .container img {
      height: 350px;
      margin: 1rem;
    }

    .section-header p {
      position: relative;
    }

    .section-header p::after,
    .section-header p::before {
      position: absolute;
      content: "";
      height: 2px;
      width: 35px;
      background: #F7CAC9;
      z-index: -1;
    }

    .section-header p::after {
      top: 11px;
      margin: 0 10px;
    }

    .section-header p::before {
      top: 11px;
      margin-left: -45px;
    }

    .service .section-header {
      width: 100%;
      text-align: center;
    } 
 <div class="about">
    <div class="container">
      <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
      <div class="content">
        <div class="section-header">
          <p>Learn About Us</p>
          <h2>Welcome to Yooga</h2>
        </div>
        <div class="about-text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
            ornare
            velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
            ornare
            velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non
            nisl
            nec nisi scelerisque maximus.
          </p>
          <button>Learn More</button>
        </div>
      </div>
    </div>
  </div>
  <!-- About End -->
  <br />

  <!-- Service Start -->
  <div class="service">
    <div class="container">
      <div class="section-header">
        <p>What we do</p>
        <h2>Yoga For Health</h2>
      </div>
    </div>
  </div>

Ответ №1:

Поскольку вы добавили- margin-left 45 пикселей для .section-header p::before , вам нужно добавить 45 пикселей для margin-left .content .section-header p , чтобы отменить эффект.

 h2 {
  font-size: 2.5rem;
  color: rgb(28, 19, 37);
  margin: 0;
}

p {
  color: rgb(134, 134, 134);
  margin: 1rem 0;
  line-height: 1.5;
}

button {
  outline: none;
  border: none;
  border-radius: 0.25rem;
  background: rgb(28, 19, 37);
  color: #F7CAC9;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 1rem 1.5rem;
}

.container {
  display: flex;
  font-family: sans-serif;
  max-width: 1000px;
  margin: 2rem auto;
}

.container img {
  height: 350px;
  margin: 1rem;
}

.section-header p {
  position: relative;
}

.content .section-header p{
  margin-left: 45px;
}

.section-header p::after,
.section-header p::before {
  position: absolute;
  content: "";
  height: 2px;
  width: 35px;
  background: #F7CAC9;
  z-index: -1;
}

.section-header p::after {
  top: 11px;
  margin: 0 10px;
}

.section-header p::before {
  top: 11px;
  margin-left: -45px;
}

.service .section-header {
  width: 100%;
  text-align: center;
} 
 <div class="about">
  <div class="container">
    <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
    <div class="content">
      <div class="section-header">
        <p>Learn About Us</p>
        <h2>Welcome to Yoga</h2>
      </div>
      <div class="about-text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
        </p>
        <button>Learn More</button>
      </div>
    </div>
  </div>
</div>
<!-- About End -->
<br />

<!-- Service Start -->
<div class="service">
  <div class="container">
    <div class="section-header">
      <p>What we do</p>
      <h2>Yoga For Health</h2>
    </div>
  </div>
</div>

Комментарии:

1. Ах, хорошо, большое вам спасибо, Технарь, за ваши объяснения и ваше время.

Метки: ,