1

eu tenho a seguinte section, e preciso que as Divs fiquem centralizadas horizontalmente na minha Grid do Boostratp 3. Ele sempre ficam no lado Esquerdo e não consido mudar isso.

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

Eu tente usar o seguinte CSS:

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

2 Respostas 2

1

Vinicius se o seu elemento tem 100% da largura vc não consegue alinha-lo no meio de outro elemento que também tem 100% de largura. Então eu deixei o elemento pai com 100% da largura, e o iframe que é o filho com 80% da largura dele a assim consegui fazer o alinhamento. Assim ele tem 10% de margem de cada lado.

OBS: Exiba em "Página toda" para ver melhor o resultado, pois vc ainda precisa usar os @media para fazer o iframe ficar bom quando responsivo.

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

3
  • Muito obrigado, Hugo. EStou a hora tentando resolver isso. =) Commented 21/05/2018 às 12:29
  • @ViniciusMartins boa jovem, só lembre de fazer a parte responsiva como os Media nas larguras de tela que precisar, assim não fica cortando o iframe e ele fica centralizado bonitinho. boa sorte ai
    – hugocsl
    Commented 21/05/2018 às 12:39
  • @ViniciusMartins cara o problema mesmo é essa iframe... eu não sei se tem como vc configura-lo antes de importar na página. Mas se vc inspecionar ele vc vai encontrar essa class "._xlzko7", ela define a largura dele em 426px, então ele nunca vai ficar menor que isso e sempre vai cortar um pedaço. Talvez tenha uma documentação da API do AirB&B que possa te ajudar nisso. Pra piorar até onde eu sei vc não consegue alterar o CSS importado dentro de um iframe infelizmente.
    – hugocsl
    Commented 21/05/2018 às 21:48
0

Veja se isto te ajuda, coloquei uma classe teste. Se for isto, depois basta renomear a classe.

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

1
  • Obrigado pela ajuda, porém testei o que o Hugo disse e funcionaou, =). Commented 21/05/2018 às 12:30

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 .