Centralizar horizontalmente várias DIV CLASS dentro de uma DIV ID - WI

[Ramon Elber 0]

Boa tarde pessoal!

 

Tenho várias divs CLASS dentro de uma div ID com WIDTH: 100% e não estou conseguindo centralizar horizontalmente essas div CLASS dentro da DIV pai.

Já tentei incluir no CSS margin: 0 auto; text-align: center; align-items: center e nada de resultado. Tentem colocar <div aligin:"center"> no HTML também e nada de resultado.

 

Fiquei metade da noite com isso ontem e não consegui resolver. Como estou sem internet em casa tenho que esperar até o dia seguinte pra consultar ou pedir ajuda aqui.

 

 

HTML -

<div id="Container">

<div class="video"> <iframe width="95%" height="95%" src="https://www.youtube.com/embed/-xE-gogMDKc" frameborder="0" allowfullscreen></iframe> </div>

<div class="video"> <iframe width="95%" height="95%" src="https://www.youtube.com/embed/-xE-gogMDKc" frameborder="0" allowfullscreen></iframe> </div>

<div class="video"> <iframe width="95%" height="95%" src="https://www.youtube.com/embed/-xE-gogMDKc" frameborder="0" allowfullscreen></iframe> </div>

</div>

CSS-

PAI

#Container {

clear:both;

background: #fff;

margin-left: 0;

width: 100%;

display:block;

float:left;

text-align: center;

align-items: center;

}

FILHO

.video {

width:264px;

height: 146px;

float:left;

margin: 0 auto;

}

Obrigado,

[rikaschmitt 54]

mas as div .video tem que ficar uma embaixo da outra ou lado a lado? pois estão com "float", e isso faz elas ficarem lado a lado.

[Ramon Elber 0]

Tem que ficar um do lado do outro. E se possível, centralizado horizontalmente.

[rikaschmitt 54]

Hum.

Acredito que você terá que criar mais uma div para colocar as .video dentro, e essa nova div que você irá centralizar com relação a div pai de todas.

 

tipo isso https://jsfiddle.net/jLz2np43/

 

 

edit: andei pesquisando alternativas e achei "flexbox", dá uma lida, pode ser uma alternativa bacana = https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[Ramon Elber 0]

Eu tentei fazer isso aqui mais não alinhou.

 

Eu não entendi muito bem essa parte:

}

.wrap {

width: 70%;

margin: 0 auto;

}

.wrap::before {

content: "";

clear: both;

}

 

Qual função de "before"?

Por que width 70%? (ou no caso vc só deu um exemplo)

E a minha div .video não pode ser 50% por que tem valores fixos.

[rikaschmitt 54]

Eu tentei fazer isso aqui mais não alinhou.

 

Eu não entendi muito bem essa parte:

}

.wrap {

width: 70%;

margin: 0 auto;

}

.wrap::before {

content: "";

clear: both;

}

 

Qual função de "before"?

Por que width 70%? (ou no caso você só deu um exemplo)

E a minha div .video não pode ser 50% por que tem valores fixos.

 

Usei apenas valores de exemplo.

 

Usei o "before" para ele dar um clear nos floats das divs, se não as próximas divs ficariam embaixo.