4

Tenho 5 divs, quero por elas alinhadas na mesma linha... Porém a div centra não fica alinhada...

<section class="content">

  <div class="row">
    <div class=" col-xs-2  ">
      <a href="#" class="thumbnail">
      <img src="..." alt="...">
      </a>
    </div>
    <div class=" col-xs-2  ">
      <a href="#" class="thumbnail">
      <img src="..." alt="...">
      </a>
    </div>
    <div class=" col-xs-2  ">
      <a href="#" class="thumbnail">
      <img src="..." alt="...">
      </a>
    </div>


    <div class="  col-xs-2  ">
      <a href="#" class="thumbnail">
          <img src="..." alt="...">
      </a>
     </div>

      <div class=" col-xs-2  ">
      <a href="#" class="thumbnail">
          <img src="..." alt="...">
      </a>
     </div>

      <div class=" col-xs-2  ">
      <a href="#" class="thumbnail">
          <img src="..." alt="...">
      </a>
     </div>


  </div>


  <div class="row">
    <div class="col-xs-2 col-xs-offset-1">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
    <div class="col-xs-2 col-xs-offset-2">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
    <div class="col-xs-2 col-xs-offset-2">
        <a href="#" class="thumbnail">
            <img src="..." alt="...">
        </a>
    </div>
  </div>



  <div class="row">

    <div class=" col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div>

     <div class=" col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div> 

    <div class="col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div>
    <div class=" torreDiv col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div>
    <div class=" torreDiv col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div>
    <div class=" col-xs-2 ">
        <a href="#" class="thumbnail">
          <img src="..." alt="...">
        </a>
    </div>

  </div>

</section>

Esta assim

Gostaria que ficasse assim

1
  • Voce precisa desse labirinto/espaço entre as divs A->C ->D ->B->A ? Se sim, qual o tamanho dos espaco? Voce precisa que esse " div E" seja ao centro acima dos outros divs? Aguardo resposta para solucionar seu problema
    – Risk
    Commented 4/12/2018 às 8:21

1 Resposta 1

5

Vc pode pegar a .row do meio e colocar uma classe .centro nela. Depois vc composition:absolute vc coloca ela "flutuando" por cima das outras, e alinha ela verticalmente com top e transform:translateY()

inserir a descrição da imagem aqui

Veja o código referente a imagem acima:

.content {
    position: relative;
}

.centro {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
    margin: auto;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<section class="content">

    <div class="row">
        <div class=" col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class=" col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class=" col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>


        <div class="  col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>

        <div class=" col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>

        <div class=" col-xs-2  ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>


    </div>


    <div class="row centro">
        <div class="col-xs-2 col-xs-offset-1">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class="col-xs-2 col-xs-offset-2">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class="col-xs-2 col-xs-offset-2">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
    </div>



    <div class="row">

        <div class=" col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>

        <div class=" col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>

        <div class="col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class=" torreDiv col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class=" torreDiv col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>
        <div class=" col-xs-2 ">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
            </a>
        </div>

    </div>

</section>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .