центрировать по горизонтали 2 элемента подряд с помощью начальной загрузки или CSS - PullRequest
Новая
       21

центрировать по горизонтали 2 элемента подряд с помощью начальной загрузки или CSS

0 голосов
/ 04 октября 2019

Я использую шаблон начальной загрузки, и мне нужно центрировать два элемента в разделе команды. Элементы находятся внутри 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 -->

I 'мы попробовали 

.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-memember ", но я все еще считаю, что мне нужно добавить CSS в div class =" team-top "

Любая помощь будет принята

1 Ответ

0 голосов
/ 04 октября 2019

Чтобы расположить или изменить порядок столбцов в строке начальной загрузки, вы можете использовать Push, Pull или Offset ( bootstrap doc ).

Offset добавляет левое поле к столбцу. 

<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>
...