html - 如何在一个部分中居中放置多个 div？

Question

我知道有一个现有的问题似乎没有任何解决方案对我有用，这是 2014 年发布的问题。

这是我的代码:

 <section id="team-block">
  <div class="team-block-centered">
    <div class="col-lg-3 col-sm-6 member-1">
      <div class="team-member">
        <img
          src="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/dr-tongsiri.jpg"
          data-original="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/dr-tongsiri.jpg"
          alt=""
          class="lazy"
          style="display: block;"
        />
        <div class="inner">
          <h4 class="name">Dr. Amy Tongsiri</h4>
          <p class="position">
            <small>Clinical Director</small>
          </p>
        </div>
        <div class="hover">
          <div class="description">
            <p>
              Dr. Amy Tongsiri has joined Smile Designers of Las Vegas in 2017.
              She has a joyous energy vibrating the room as she enters. Almost
              permanently smiling, she exudes positivity and can easily relaxed
              and soothe a nervous patient. The desire to pursue a career in
              dentistry came young for Dr. Tongsiri, during the course of her
              own dental health. "I originally wanted to do orthodontics, when I
              had braces,” she says, flashing the resulting perfect smile. “But
              eventually, I found General Dentistry to be more exciting because
              you are challenged by being able to cover everything."
            </p>
          </div>
          <div class="read-more">
            <a href="/new/dr-amy-tongsiri/" class="button white outline"
              >Read more <span class="nc-icon-glyph arrows-1_bold-right"></span
            ></a>
          </div>
        </div>
        <!--.hover-->
      </div>
      <!--.team-member-->
    </div>
    <!--.col-lg-3-->
  </div>
  <div class="col-lg-3 col-sm-6 member-2">
    <div class="team-member">
      <img
        src="http://lvsmiledesigners.com/new/wp-content/uploads/2019/07/Dr-Dominique-Dela-Cruz.jpg"
        data-original="http://lvsmiledesigners.com/new/wp-content/uploads/2019/07/Dr-Dominique-Dela-Cruz.jpg"
        alt=""
        class="lazy"
        style="display: block;"
      />
      <div class="inner">
        <h4 class="name">Dr. Dominique Dela Cruz</h4>
        <p class="position">
          <small>Lead Dentist</small>
        </p>
      </div>
      <div class="hover">
        <div class="description">
          <p>
            Providing comprehensive dental care that is tailored to each and
            every patient’s needs is Dr. Dominique Dela Cruz’s goal when it
            comes to treating patients. She strives to provide dental care in a
            comfortable environment while using the most innovative and advanced
            technology. Dr. Dela Cruz grew up in Las Vegas, NV. On her spare
            time, she likes to stay outdoors as much as possible. She loves to
            hike, travel, kayak and snowboard. She also likes to read books and
            watch movies with her dogs. Like most of her patients, Dr. Dela Cruz
            has a sweet tooth and enjoys eating candy, chocolate and other
            pastries.
          </p>
        </div>
        <div class="read-more">
          <a href="/new/dr-jorge-jimenez-marquez/" class="button white outline"
            >Read more <span class="nc-icon-glyph arrows-1_bold-right"></span
          ></a>
        </div>
      </div>
      <!--.hover-->
    </div>
    <!--.team-member-->
  </div>
  <!--.col-lg-3-->
  <div class="col-lg-3 col-sm-6 member-3">
    <div class="team-member">
      <img
        src="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/karla.jpg"
        data-original="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/karla.jpg"
        alt=""
        class="lazy"
        style="display: block;"
      />
      <div class="inner">
        <h4 class="name">Karla Brown</h4>
        <p class="position">
          <small>Office Manager</small>
        </p>
      </div>
      <div class="hover">
        <div class="description">
          <p>
            Delivering outstanding customer service has always been an essential
            part of a day’s work for Karla. As Smile Designers of Las Vegas
            Office Manager, she is responsible for all office procedures, and
            uses her organizational skills to ensure smooth operations in a busy
            work environment.
          </p>
        </div>
        <div class="read-more">
          <a href="/new/nancy-gutierrez/" class="button white outline"
            >Read more <span class="nc-icon-glyph arrows-1_bold-right"></span
          ></a>
        </div>
      </div>
      <!--.hover-->
    </div>
    <!--.team-member-->
  </div>
  <!--.col-lg-3-->
  <div class="col-lg-3 col-sm-6 member-4">
    <div class="team-member">
      <img
        src="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/nancy.jpg"
        data-original="http://lvsmiledesigners.com/new/wp-content/uploads/2019/06/nancy.jpg"
        alt=""
        class="lazy"
        style="display: block;"
      />
      <div class="inner">
        <h4 class="name">Nancy Gutierrez</h4>
        <p class="position">
          <small>Lead Back Office Assistant</small>
        </p>
      </div>
      <div class="hover">
        <div class="description">
          <p>
            As Smile Designers of Las Vegas lead dental assistant she says her
            coworkers and easy-going patients make it a pleasure to go to work
            every day. She loves been a part in patients journeys to a better
            and healthier oral health.
          </p>
        </div>
        <div class="read-more">
          <a href="/new/karla-brown/" class="button white outline"
            >Read more <span class="nc-icon-glyph arrows-1_bold-right"></span
          ></a>
        </div>
      </div>
      <!--.hover-->
    </div>
    <!--.team-member-->
  </div>
  <!--.col-lg-3-->
</section>

这是实时站点:http://lvsmiledesigners.com/new/

该部分位于“我们的团队可以帮助您!”下方 header 。我担心的是 Amy 博士的 div。我不确定为什么艾米博士的图像宽度比其他图像窄。

Answer 1

[更新]:您应该用 .team-block-centered 包裹所有医生列，以将它们定位在中心位置。在您的现场演示网站中 - 您只包装 Dr. Amy div。

查看您的代码，所有具有 col-lg-3 类的元素都不是 sibling ，而是嵌套在 .team-block-centered 中的 Dr. Amy div 元素元素。这就是主要原因。如果您删除类 .team-block-centered 的父包装器，一切都会好起来的。

[上一个]:.team-block-centered 父包装类的宽度为 900px。 col-lg-3 类的宽度为 20%(本例中为 234px)。

问题是您有 4 列宽度 20% * 4 = 80%(234 * 4 = 936px)，这大于父包装宽度。

给 .team-block-centered class width: 100% ，然后居中。