Center DIV in Bootstrap Grid

Navigation
1

I have the following section, and I need the Divs to be centered horizontally in my Grid of Boostratp 3. It always stays on the Left side and I do not mind changing 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><divclass="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><divclass="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;
}
    
asked by anonymous 21.05.2018 / 13:43

2 answers

1

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

OBS: Show in "All page" to see the result better, since you still need to use @media to make iframe 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><divclass="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><divclass="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>
    
21.05.2018 / 14:19
0

See if this helps, I've put a teste class. If so, then just 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><divclass="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><divclass="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>
    
21.05.2018 / 13:51
______ qstntxt ___

Calling priority Nav, a lib that places the executing items inside a new drop-down, called "More", this dropdown is dynamically created in pure javascript as soon as it's needed. In it a button appears with class js-nav-toggle . I'm trying out some things, and I would like to change some things on that button, with pure javascript, I'm doing a test trying to find the js-nav-toggle class that is definitely in the document but only gives undefined.

link

I use this code that works fine on other elements that are written manually from the document. %code%

What could be happening?

    
______ azszpr310823 ___

The variable %code% is a list of nodes of class %code% :

%pre%

You can not change the list at once. It is necessary to iterate every element of the list, and you can do this %code% :

%pre%

But if it is only 1 element, you can use the index %code% :

%pre%

You can also use %code% (if it is only 1 element) or %code% (1 or more):

%pre%

While %code% also creates a list of nodes equally to %code% , and if it is only 1 element, you also use the %code% index:

%pre%

Or:

%pre%

However, if it is only 1 element, it makes more sense to use %code% :

%pre%

If it's just 1 element, it does not make sense to create a list of nodes.

Example:

%pre% %pre% %pre%
    
______ ___ azszpr310805

Hello @John,

Do you wanna change the color of priority nav class, it?

Via css u can do:

%pre%

or

If u can use jquery, try the following:

%pre%     
___ Call app.service when reloading page