8

Estou com problemas ao centralizar a À Pagina porque centralizar ambas as laterais já foi realizado, já adiconei varias classes e atributos na tag style mas não obtive exito, e para exemplificar melhor o ocorrido retirei um print e coloqueis setas mas mostrar a diferença entre o lado superior e inferior Código do Head:

<head>
    <link rel="stylesheet" type="text/css" href="../FullPage/jquery.fullPage.css">
    <script type="text/javascript" src="../Bootstrap/js/jquery-1.11.1.js"></script>
    <script src="../FullPage/vendors/jquery.easings.min.js"></script>
    <script type="text/javascript" src="../FullPage/jquery.fullPage.js"></script>
    <script type="text/javascript" src="../Bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="../Bootstrap/css/bootstrap.css" media="screen" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>

Código com Bootstrap

<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
                    <span class="sr-only">Toggle navigation</span> 
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button> 
                <a class="navbar-brand" href="#">Meu Site</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">News</a></li>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Create Account</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->
    </nav>

    <div class="container span7 text-center col-md-4 col-md-offset-3" style="margin: 0 auto;float: none; border: 3px solid red">
        <div class="row">
            <div>
                <img src="../../app.images/logo.jpg" />
            </div>
            <form style="border:3px solid blue" role="search">
                <div class="form-group">
                    <label class="radio-inline"><input type="radio" name="optradio">Opt1</label>
                    <label class="radio-inline"><input type="radio" name="optradio" checked="">Opt2</label>
                    <label class="radio-inline"><input type="radio" name="optradio">Opt3</label>
                </div>

                <div class="input-group">
                    <a href="#" class="btn btn-info input-group-btn" style="font-size:14px">
                        <span class="glyphicon glyphicon-th"></span>
                    </a>
                    <input class="form-control " type="text" placeholder="Search" />
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit">Search</button>
                    </div>
                </div>
            </form>
            <div style="border:3px solid yellow">
                Slogan
            </div>
            <div style="border:3px solid green">
                <a href="#">Mobile</a>
                <a href="#">Addons</a>
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
</body>

Imagem da Interface (Logo da pepsi é somente ilustrativo)

inserir a descrição da imagem aqui

5
  • Poderia adicionar o conteudo de <head> só para saber qual versão você está usando
    – Syzoth
    24/12/2014 às 16:36
  • Adicionado o <head>
    – Ricardo
    24/12/2014 às 16:38
  • É a versão 3.3.1?
    – Syzoth
    24/12/2014 às 16:40
  • Colori todas as bordas das divs para facilitar a visualização
    – Ricardo
    24/12/2014 às 16:40
  • Sim a Ultima versão
    – Ricardo
    24/12/2014 às 16:41

4 Respostas 4

6

Visualizando o "Caixa" com o Inspetor de elemento do Firefox, notei que o elemento <div class="container span7 text-center col-md-4 col-md-offset-3" ...> (width = 419px) é menor de largura que o elemento <div class="row"> (width = 449px), isto atrapalhou de manipular os elementos usando margin-top, top, position, etc.

Então o melhor caminho foi criar elementos separados, existem duas maneiras mais praticas de se fazer isto.

Usando flex do CSS

Note que a propriedade flex ainda não é suportada por alguns navegadores (alguns navegadores mobile por exemplo)

A primeira maneira é usando a propriedade "flex" e definindo a altura como 100%, note que para alinhar os elementos nós usamos align-items: center;

div.flex-align {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 100%;
}

O html deve ficar assim:

<div class="flex-align"><!-- começa o flex -->
    <div class="container span7 text-center col-md-4 col-md-offset-3" style="margin: 0 auto;float: none; border: 3px solid red">
        <div class="row">
         ...
        </div>
    </div>
</div><!-- termina o flex -->

Usando position e top

A segunda maneira, que é suportada por browser mais antigos, seria usando a altura do elemento "container" que eu capturei com o Inspetor e este mostrou ser 116px (tirando as bordas deve diminuir):

Calculando isto o código deve ficar algo como:

    <div style="position: absolute; height: 116px; top: 50%; width: 100%; left: 0;">
        <div style="position: relative; height: 116px; top: -58px;">
            Coloque o container aqui para teste
        </div>
    </div>

Explicando o código:

  • No primeiro DIV, usei position: absolute; para facilitar o alinhamento vertical
  • Fixei a altura conforme a altura do "container" e aplicaquei top: 50% para alinhar no centro da tela
  • Usei left: 0, pois left: auto (padrão dos elementos) acaba posicionando o elemento conforme a origem
  • No segundo DIV, fixei a altura e usei position: relative; para poder usar a propriedade top
  • Para alinhar o segundo DIV eu peguei a altura padrão do elemento "container" e dividi por "2" (116/2 = 58) e setei de maneira negativa top: -58px;

Nota: Só uma dica, evite estilos "inline", depois você pode mover o CSS todo para a sua folha de estilo, ou se não tiver, criar uma chamada main.css (nunca altere as folhas de estilo de bibliotecas, como o bootstrap.css por exemplo).

O código deve ficar algo como:

    <div style="position: absolute; width: 100%; height: 116px; top: 50%; left: 0;">
        <div style="position: relative; height: 116px; top: -58px; height: 116px;">

            <div class="container span7 text-center col-md-4 col-md-offset-3" style="margin: 0 auto; float: none; border: 3px solid red">
                <div class="row">
                    <div>
                        <img src="../../app.images/logo.jpg" />
                    </div>
                    <form style="border:3px solid blue" role="search">
                        <div class="form-group">
                            <label class="radio-inline"><input type="radio" name="optradio">Opt1</label>
                            <label class="radio-inline"><input type="radio" name="optradio" checked="">Opt2</label>
                            <label class="radio-inline"><input type="radio" name="optradio">Opt3</label>
                        </div>

                        <div class="input-group">
                            <a href="#" class="btn btn-info input-group-btn" style="font-size:14px">
                                <span class="glyphicon glyphicon-th"></span>
                            </a>
                            <input class="form-control " type="text" placeholder="Search" />
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit">Search</button>
                            </div>
                        </div>
                    </form>
                    <div style="border:3px solid yellow">
                        Slogan
                    </div>
                    <div style="border:3px solid green">
                        <a href="#">Mobile</a>
                        <a href="#">Addons</a>
                        <a href="#">Contact</a>
                    </div>
                </div>
            </div>


        </div>
3
  • Funciou, mas quando se vai diminuindo o tamanho do browser o container espande de tamanho (e tudo que esta dentro dele), o estilo inline é somente para teste rapido e para ser facil de compartilhar aqui
    – Ricardo
    24/12/2014 às 19:31
  • @RicardoHenrique Não é bem isto, é que no bootstrap col-md-* usa porcentagem, se quiser você pode fixar a largura do elemento <div style="position: relative; height: 116px; top: -58px; height: 116px;"> usando "width". Veja eu editei a resposta, adicionei um exemplo com "flex".
    – Syzoth
    24/12/2014 às 19:41
  • Funcionou perfeitamente novamente obrigado.
    – Ricardo
    24/12/2014 às 19:55
-1

Cara usa a classe col-md-offset-4 o tamanho da off-set pode variar de acordo com sua grid ao se deseja centralizar, lembrando de obedecer o padrão de 12 colunas.

2
  • já estou usando col-md-offset-3, e teste com col-md-offset-4 e nao fica centralizado verticalmente
    – Ricardo
    24/12/2014 às 17:23
  • Cara usa container-fluid e row-fluid, ele ajusta automaticamento a proporção, o Layout deve está quebrando na resolução. 24/12/2014 às 17:48
-1

Bootstrap 3 Bastar chamar a classe "centered" nas divs com a classe "col-lg-", "col-md-", "col-sm-" ou "col-xs-" (1-12).

1
  • não funcionou, acabei de testar
    – Ricardo
    24/12/2014 às 17:44
-1

Bom, até onde eu sei, o bootstrap não tem componentes para dimensionar verticalmente.

Use a propriedade margin-top dentro style do form.

exemplo:

<form style="margin-top:100px">

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 .