时间戳

首页 > 解决方案 > 使用引导程序或 css 在一行中水平居中 2 个元素

html - 使用引导程序或 css 在一行中水平居中 2 个元素

问题描述

我使用引导模板，我需要在团队部分中居中两个元素。元素在 div class="col-md-3 col-sm-3 col-xs-12" 里面，这个在 div class="team-top" 里面，这个在 div class="row ”。我仍然是引导程序的新手，所以我很难找到我必须修改哪些类。每个元素都有描述每个团队成员的图像和文本。

实际情况

这是代码。

  <div id="team" class="our-team-area area-padding">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="section-headline text-center">
            <h2>Nuestro Equipo</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="team-top">
          <div class="col-md-3 col-sm-3 col-xs-12">
            <div class="single-team-member">
              <div class="team-img">
                <a href="#">
                    <img src="img/team/1.jpg" alt="">
        </a>
                <div class="team-social-icon text-center">
                  <ul>
                    <li>
                      <a href="#">
                            <i class="fa fa-facebook"></i>
                        </a>
                    </li>
                    <li>
                      <a href="#">
            <i class="fa fa-twitter"></i>
            </a>
                    </li>
                    <li>
                      <a href="#">
            <i class="fa fa-instagram"></i>
            </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="team-content text-center">
                <h4>Daniel Cárdenas</h4>
                <p>Músico, Ingeniero en y Cofundador de Conectarte Studio</p>
              </div>
            </div>
          </div>
          <!-- End column -->
          <div class="col-md-3 col-sm-3 col-xs-12">
            <div class="single-team-member">
              <div class="team-img">
                <a href="#">
                                        <img src="img/team/2.jpg" alt="">
                                    </a>
                <div class="team-social-icon text-center">
                  <ul>
                    <li>
                      <a href="#">
                                                    <i class="fa fa-facebook"></i>
                                                </a>
                    </li>
                    <li>
                      <a href="#">
                                                    <i class="fa fa-twitter"></i>
                                                </a>
                    </li>
                    <li>
                      <a href="#">
                                                    <i class="fa fa-instagram"></i>
                                                </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="team-content text-center">
                <h4>Ignacio Weisser</h4>
                <p>Músico, Ingeniero en Sonido y Cofundador de Conectarte Studio</p>
              </div>
            </div>
          </div>
          <!-- End column -->
        </div>
      </div>
    </div>
  </div>
  <!-- End Team Area -->

我试过了

.team-top{
    text-align:center;
    margin: 0 auto;
    display: block;
}

.team-top{
    left: 0;
    right: 0;
    margin: 0 auto;
}

.team-top{
    margin-right: auto;
    margin-left: auto;
}

并将类添加到 div class="row" 和 div class="col-md-3 col-sm-3 col-xs-12" 和 div class="single-team-member" 但我仍然相信我必须添加CSS 到 div class="team-top"

任何帮助，将不胜感激

标签： htmlcssrow

解决方案

要在引导行中定位或重新排序列，您可以使用 Push、Pull 或 Offset ( bootstrap doc )。

偏移量为列添加左边距。

<div class="row">
     <div class="col-md-3 col-sm-3 col-sm-offset-3 col-xs-12"></div>
     <div class="col-md-3 col-sm-3 col-xs-12"></div>
</div>

推荐阅读