0

Fiz uma form com o Bootstrap, porém preciso posiciona-lo no meio da tela. posicionei com col-md-offset-? na horizontal, mas preciso posiciona-lo verticalmente.

alguma forma no BootStrap ou devo fazer por conta própria em uma CSS diferenciado?

1
  • Intuitivamente, acredito que seja row-md-offset-? pois col = coluna e row = linha. Porém você deveria reproduzir um exemplo funcionando no seu problema no jsfiddle.net e postar aqui. Commented 18/03/2014 às 16:35

1 Resposta 1

3

Tem várias formas de centralizar horizontalmente e verticalmente. Você está falando de "offset" para centralizar horizontalmente utilizando o grid system do Bootstrap, então é melhor entender o conceito porque os números col-md-? podem variar:

Conceito de offset

O GRID do Bootstrap por padrão tem 12 colunas, veja essa imagem com linhas de 6 e 12 colunas:

Logo, se você quiser centralizar a coluna col-md-6 o offset deve ser de "3", assim ficam 3 colunas para cada lado, totalizando em 12 colunas, mais fácil ver a imagem a seguir:

Alinhamento Vertical

Tem várias formas de fazer isso, como você não colocou código nenhum, fica difícil de ser específico, eis algumas soluções umas mais profissionais do que outras:

  1. Coloque um DIV de container do seu form com o seguinte CSS:

    height: 300px; /* obrigatório para centralizar verticalmente */
    top:0px;
    bottom:0px;
    margin:auto;
    position:absolute
    
  2. Adicione margin-top:100px ao seu container ou form, ajuste o valor de acordo com sua necessidade, mas lembrando esse é um falso centro vertical, quando na verdade você está empurrando o objeto para baixo, e se altura variar a distância sempre será a mesma.

  3. Também existe o vertical-align:middle, porém funciona com tables apenas, talvez tenha alguma gambiarra por aqui.

1
  • fiz exatamente como explicou com o col-md-? para o alinhamento horizontal, porem estava pensando nessa mesma forma que você explicou na vertical, achei que houvesse alguma maneira no bootstrap, mas da mesma forma agradeço a ajuda. Commented 19/03/2014 às 3:47

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 .