0

Estou fazendo uma página utilizando bootstrap e preciso que o carousel fique centralizado junto com as imagens no meio da página, tanto horizontalmente (já feito) quanto verticalmente, pois no celular, a imagem aparece lá no topo. Obs: já tentei usar o comando vertical-align: middle e infelizmente não funcionou.

CSS

*
{
  margin: 0px;
  padding: 0px;
}

body, html
{
  height: 100%;
  background: linear-gradient(to bottom right, #00ccff , #00cc00);
}

/* MEDIA QUERY FOR IPAD LANDSCAPTE */
@media (min-width: 980px) and (max-width: 1100px) {
}

/* MEDIA QUERY FOR IPAD PORTRAIT */
@media (min-width: 768px) and (max-width: 979px) {
}

/* MEDIA QUERY FOR ALL MOBILE DEVICES : HAVING LESS THAN 767 RESOLUTION */
@media (max-width: 767px) {
}

/* MEDIA QUERY FOR EXTRA SMALL : IPHONE LANDSCAPE & PORTRAIT DEVICES */
@media (max-width: 480px) {
}

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

#myCarousel, .carousel-inner
{
  height: 100%;
}

#primeira_imagem
{
  width: 60%;
  height: auto;
  margin: auto;
  display: block
}

Visualização da página: Página através do computador

Página através do celular

2
  • Isto responde à sua pergunta? Qual a melhor forma de centralizar um elemento vertical e horizontalmente?
    – David
    Commented 6/08/2020 às 20:27
  • Até consegui alinhar tudo usando o método do segundo comentário, mas agora nasceu outro problema. Os slides do carousel estão nascendo no topo e se alinhando no meio quando ocorre a troca de slides, causando um "efeito esquisito", não ocorre a troca de slides fluidamente. Commented 7/08/2020 às 0:03

2 Respostas 2

1

para o seu caso o Flexbox vai te ajudar bastante.

Você pode criar uma div para envolver o seu carousel e definir seu tamanho. Essa div irá receber as seguintes propriedades css:

.Wrapper{
display: flex;
justify-content: center;
align-items:center;
}

Veja o exemplo no CodePen

Pesquisa também Grid CSS

Esses dois conjuntos de propriedades: Flexbox e Grid vai fazer com que você posicione os elementos mais facilmente.

0

Coloca esse css no body

display: flex; align-items: center; justify-content: center

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 .