Center DIV on Bootstrap Grid

Asked

Viewed 273 times

1

I have the following Section, and I need the Divs to be centered horizontally on my Boostratp 3 Grid. It always stays on the Left side and I can’t change that.

    <section id="servicos">
      <div class="container">
        <h5>Hospedagem</h5>
          <div class="row">
          <div class="col-sm-6" style="border: 1px solid red">
            <div align="center" class="airbnb-embed-frame" data-id="16409839" data-view="home" style="width:100%;height:500px;"><a href="https://www.airbnb.com.br/rooms/16409839?s=51"><span>Ver no Airbnb</span></a><a href="https://www.airbnb.com.br/rooms/16409839?s=51" rel="nofollow">Flat com 28 m2 mobiliado com excelente localização</a><script async="" src="https://www.airbnb.com.br/embeddable/airbnb_jssdk"></script></div>
          </div>
          <div class="col-sm-6" style="border: 1px solid red">
            <div align="center" class="airbnb-embed-frame" data-id="16409839" data-view="home" style="width:100%;height:500px;"><a href="https://www.airbnb.com.br/rooms/16409839?s=51"><span>Ver no Airbnb</span></a><a href="https://www.airbnb.com.br/rooms/16409839?s=51" rel="nofollow">Flat com 28 m2 mobiliado com excelente localização</a><script async="" src="https://www.airbnb.com.br/embeddable/airbnb_jssdk"></script></div>
          </div>
          </div>
          <div class="mais-hospedagem" style="border: 1px solid red">
            <button class="btn btn-custom btn-roxo btn-lg bt-destino mais-hospedagem"><b>mais hospedagens</b></button>
          </div>
        </div>
      </div>
    </section>

I try to use the following CSS:

.airbnb-embed-frame{
    text-align: center;
    color: white;
    display: table-cell;
    vertical-align: middle;
}
html html5 css3 twitter-bootstrap grid

2 answers

1


Vinicius if your element has 100% of the width vc can not align it in the middle of another element that also has 100% width. So I left the parent element 100% wide, and the iframe that is the child 80% wide so I was able to do the alignment. So it has 10% margin on each side.

OBS: Show in "Whole Page" to see the result better, as you still need to use @media to do the iframe feel good when responsive.

.airbnb-embed-frame{
    text-align: center;
    color: white;
    overflow: hidden;
    width: 100%;
    height: 500px;
    display: block;
}
iframe {
  width: 80% !important;
}
.mais-hospedagem {
  text-align: center;
}
@media only screen and (max-width: 660px) {
   iframe {
       width: 75% !important;
    }
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <section id="servicos">
    <div class="container">
      <h5>Hospedagem</h5>
        <div class="row">
        <div class="col-sm-6" style="border: 1px solid red">
          <div align="center" class="airbnb-embed-frame" data-id="16409839" data-view="home" style="width:100%;height:500px;"><a href="https://www.airbnb.com.br/rooms/16409839?s=51"><span>Ver no Airbnb</span></a><a href="https://www.airbnb.com.br/rooms/16409839?s=51" rel="nofollow">Flat com 28 m2 mobiliado com excelente localização</a><script async="" src="https://www.airbnb.com.br/embeddable/airbnb_jssdk"></script></div>
        </div>
        <div class="col-sm-6" style="border: 1px solid red">
          <div align="center" class="airbnb-embed-frame" data-id="16409839" data-view="home" style="width:100%;height:500px;"><a href="https://www.airbnb.com.br/rooms/16409839?s=51"><span>Ver no Airbnb</span></a><a href="https://www.airbnb.com.br/rooms/16409839?s=51" rel="nofollow">Flat com 28 m2 mobiliado com excelente localização</a><script async="" src="https://www.airbnb.com.br/embeddable/airbnb_jssdk"></script></div>
        </div>
        </div>
        <div class="mais-hospedagem" style="border: 1px solid red">
          <button class="btn btn-custom btn-roxo btn-lg bt-destino mais-hospedagem"><b>mais hospedagens</b></button>
        </div>
      </div>
    </div>
  </section>

  • Thank you so much, Hugo. I’m trying to solve this. =)

  • @Viniciusmartins good young, just remember to do the responsive part as the Media in the screen widths you need, so do not keep cutting the iframe and it is centered cute. good luck there

  • @Viniciusmartins face the same problem is this iframe... I do not know if you have how to configure it before importing on the page. But if you inspect it you will find that class ". _xlzko7", she sets his width at 426px, so it will never get smaller than that and will always cut a piece. Maybe you have some Airb&b API documentation that can help you with that. To make matters worse as far as I know you can’t change the imported CSS inside an iframe unfortunately.

0

See if this helps you, I put a class teste. If so, then simply rename the class.

.airbnb-embed-frame{
    text-align: center;
    color: white;
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

.teste {
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
<section id="servicos">
      <div class="container">
        <h5>Hospedagem</h5>
          <div class="row teste">
          <div class="col-sm-6" style="border: 1px solid red">
            <div align="center" class="airbnb-embed-frame" data-id="16409839" data-view="home" style="width:500px;height:500px;"><a href="https://www.airbnb.com.br/rooms/16409839?s=51"><span>Ver no Airbnb</span></a><a href="https://www.airbnb.com.br/rooms/16409839?s=51" rel="nofollow">Flat com 28 m2 mobiliado com excelente localização</a><script async="" src="https://www.airbnb.com.br/embeddable/airbnb_jssdk"></script></div>
          </div>
          <div class="col-sm-6" style="border: 1px solid red">
            <div align="center" class="airbnb-embed-frame" data-id="16409839" data-view="home" style="width:500px;height:500px;"><a href="https://www.airbnb.com.br/rooms/16409839?s=51"><span>Ver no Airbnb</span></a><a href="https://www.airbnb.com.br/rooms/16409839?s=51" rel="nofollow">Flat com 28 m2 mobiliado com excelente localização</a><script async="" src="https://www.airbnb.com.br/embeddable/airbnb_jssdk"></script></div>
          </div>
          </div>
          <div class="mais-hospedagem" style="border: 1px solid red">
            <button class="btn btn-custom btn-roxo btn-lg bt-destino mais-hospedagem"><b>mais hospedagens</b></button>
          </div>
        </div>
      </div>
    </section>

  • Thanks for the help, but I tested what Hugo said and worked, =).

Browser other questions tagged html html5 css3 twitter-bootstrap grid

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