2

Olá, tenho uma página em PHP no qual estou usando o Bootstrap para fazer uma simples tela de pesquisa.

<div class="container">
    <img src="/img/logoSuivi.png" class="img-responsive center-block">
    <div class="well col-md-3">
        <div class="breadcrumb">
            <form class="status">
                <fieldset>
                    <div class="form-group">
                        <label for="repair-status-search">Ordre de service:</label>
                        <input class="form-control" id="code" name="code" type="text" placeholder="Ordre de service" value="" onkeypress="return searchKeyPress(event);">
                    </div>
                </fieldset>
            </form>
            <button class="btn btn-success center-block" id="submit">Recherche</button>
            <img src="/img/Preloader.gif" class="loader img-responsive center-block" style="display: none;">
        </div>
    </div>
</div>

http://www.bootply.com/kCqrqsHQ8V

Na página acima é possível ver como está ele..

PS: Estou usando a versão 3.3.6

Gostaria de centralizar horizontalmente e verticalmente a partir da div aonde contém a classe Well, como é possível realizar isso?

Não consigo usando apenas o center-block como usei na imagem.

3

1 Resposta 1

3

Uma solução seria usar o poder da propriedade transform. Com uma pequena combinação à outras propriedades é possessível ter um alinhamento horizontal e vertical. Se deseja que as imagens tenham um alinhamento semelhante envolva todas as divs em um contêiner e aplique as formatações da classe well a esse contêiner, conforme pode ver abaixo.

.container {
   position: relative;
}

.well {
   position: absolute;
   top: 50%;
   right: 50%;
   transform: translate(50%, 50%);
}

Essa solução resulta no alinhamento em relação a div pai. Ou seja a div.well estará no centro da div.container. Enfim o tamanho e a posicao da div container influenciará na centralização da div filha(well).

3
  • Ótima resposta, era realmente isto que eu queria! Mas agora poderia me dizer, por que eu não estou conseguindo alinhas verticalmente ao meio da tela? 1/03/2016 às 11:40
  • @RenanSerrãoNogueira adicionei o motivo no último paragrafo. Como dito ali a div(well) se alinha em relação ao tamanho de sua div pai(container), assim para se alinhar no centro da tela o div pai deve ocupar toda a tela, o que é bem provável que não esteja ocorrendo.
    – Nocttuam
    5/03/2016 às 0:01
  • Só complementando queria deixar como sugestão usar esses estilos em classes próprias, afinal se usar nas classes do Bootstrap quando elas forem chamadas em outras partes do código não terão o comportamento esperado.
    – Nocttuam
    5/03/2016 às 0:02

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 .