By Divs next to bootstrap

Asked

Viewed 358 times

4

I have 5 Ivs, I want them aligned in the same line... But the center div is not aligned... 

<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

html css grid tags responsive

  • Do you need this maze/space between the Divs A->C ->D ->B->A ? If so, how large are the spaces? Do you need this " div E" to be at the center above the other Divs? I’m waiting for the answer to solve your problem

1 answer

5

You can pick up the .row middle and put a class .centro in it. Then you composition:absolute you put her "floating" on top of the others, and align her vertically with top and transform:translateY()

inserir a descrição da imagem aqui

See the code for the image above:

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

Browser other questions tagged html css grid tags responsive

You are not signed in. Login or sign up in order to post.