html - 没有正确居中的 div“容器”

Question

我想获得这种类型的结果

我有 2 个我不知道要解决的问题。

第一个问题是，我想把我的形象放在左边。我认为这float: left 不是解决方案。

.about .about-img img {
    position: relative;
    width: 30%;
    float: left;   
}

第二个问题是，我希望我的标题正确Learn About Us并居中What we do。

我试过这个：

.container{
    text-align: center;
}

我提前感谢您的时间和帮助。

/*******************************/
/********** About CSS **********/
/*******************************/

.about {
    position: relative;
    width: 100%;
    padding: 45px 0;
  
}


.about .about-img img {
    position: relative;
    width: 30%;
   
    
}


.about .about-text p {
    font-size: 16px;
 
}

.about .about-text a.btn {
    position: relative;
    margin-top: 15px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #F7CAC9;
    background: #343148;
    border-radius: 0;
    transition: .3s;
}

.about .about-text a.btn:hover {
    color: #343148;
    background: #F7CAC9;
}



/*******************************/
/******* Section Header ********/
/*******************************/


.section-header {
    position: relative;
    margin: 0 auto;
    margin-bottom: 45px;
}

.section-header p {
    display: inline-block;
    margin: 0 30px;
    margin-bottom: 5px;
    padding: 0 10px;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    background: #ffffff;
}

.section-header p::after { /* les barres */ 
    position: absolute;
    content: "";
    height: 2px;
    top: 11px;
    right: -30px;
    left: -30px;
    background: #F7CAC9;
    z-index: -1;
}

.section-header h2 {
    margin: 0;
    position: relative;
    font-size: 40px;
    font-weight: 700;
}


/*******************************/
/********* Service CSS *********/
/*******************************/

.service {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.container{
    text-align: center;
}

<!-- About Start -->
      <div class="about">
        <div class="container">
          <div class="about-img">
            <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
          </div>
          <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>
            <a class="btn" href="">Learn More</a>
          </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>
      <!-- Service End -->

标签： htmlcss

Answer 1

您可能想做这样的事情，使用 Pedro 建议的 flexbox。

/*******************************/


/********** About CSS **********/


/*******************************/

.about {
  position: relative;
  width: 100%;
  padding: 45px 0;
}

.about .about-img {
  flex: 1 1 0px;
}

.about .about-img img {
  position: relative;
  width: 100%;
}

.about .about-text p {
  font-size: 16px;
}

.about .about-text a.btn {
  position: relative;
  margin-top: 15px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #F7CAC9;
  background: #343148;
  border-radius: 0;
  transition: .3s;
}

.about .about-text a.btn:hover {
  color: #343148;
  background: #F7CAC9;
}


/*******************************/


/******* Section Header ********/


/*******************************/

.hero-text {
  flex: 1 1 0px;
}

.section-header {
  position: relative;
  margin: 0 auto;
  margin-bottom: 45px;
}

.section-header p {
  display: inline-block;
  margin: 0 30px;
  margin-bottom: 5px;
  padding: 0 10px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  background: #ffffff;
}

.section-header p::after {
  /* les barres */
  position: absolute;
  content: "";
  height: 2px;
  top: 11px;
  right: -30px;
  left: -30px;
  background: #F7CAC9;
  z-index: -1;
}

.section-header h2 {
  margin: 0;
  position: relative;
  font-size: 40px;
  font-weight: 700;
}


/*******************************/


/********* Service CSS *********/


/*******************************/

.service {
  position: relative;
  width: 100%;
  padding: 45px 0 15px 0;
}

.hero-container {
  max-width: 900px;
  text-align: center;
  display: flex;
}

.container {
  max-width: 900px;
  text-align: center;
}

<!-- About Start -->
<div class="about">
  <div class="hero-container">
    <div class="about-img">
      <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
    </div>
    <div class="hero-text">
      <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>
        <a class="btn" href="">Learn More</a>
      </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 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>
      <a class="btn" href="">Learn More</a>
    </div>
  </div>

</div>
<!-- Service End -->