1

Como posso centralizar verticalmente uma tag (Top countries) com o formulario?

Código:

<div class="wrapper" role="main"><!-- START Content -->
        <div class="container"><!--- START Site Content --->
            <div class="row">
                <div id="form_filter" class="col-md-8" style="border:2px solid red">
                    <div class="row">
                        <span>Top Countries</span>
                        <form class="form-inline" role="form" action="#" method="get">
                            <div class="form-group">
                                <label for="period">Period</label>
                                <select class="form-control" id="period" name="period">
                                    <option value="">All Time</option>
                                    <option value="">Today</option>
                                    <option value="">This Week</option>
                                    <option value="">This Month</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="country_list">Country</label>
                                <select class="form-control" id="input_country" name="input_country">
                                    <option value="">All (WorldWide)</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div><!--- END Site Content --->
    </div><!-- END Content -->

Imagem:inserir a descrição da imagem aqui

Como deveria ficar: inserir a descrição da imagem aqui

8
  • Aparentemente ela já está verticalmente centralizada (ficaria melhor com padding: 4px 0). Você quis dizer centralizada na horizontal? 7/01/2015 às 19:51
  • @renan foi adicionado como deveria ficar o alinhamento, (estou usando bootstrap)
    – Ricardo
    7/01/2015 às 19:55
  • (chute) experimente colocar o span dentro do form
    – bfavaretto
    7/01/2015 às 21:08
  • @bfavaretto agora estão lado a lado, porem ainda o top countries esta um pouco acima da form
    – Ricardo
    7/01/2015 às 22:29
  • Experimentou display: inline-block ? 8/01/2015 às 4:23

2 Respostas 2

2

É só uma questão de posicionamento das tags, e um pouco de sagacidade. Tente colocar o elemento como se fosse um elemento do formulário assim:

<div class="form-group"><span>Top Countries</span></div>

O restante você pode fazer com uma classe e etc.

Código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<div class="wrapper" role="main"><!-- START Content -->
        <div class="container"><!--- START Site Content --->
            <div class="row">
                <div id="form_filter" class="col-md-8" style="border:2px solid red">
                    <div class="row">
                        
                        <form class="form-inline" role="form" action="#" method="get">
                          <div class="form-group"><span>Top Countries</span></div>
                            <div class="form-group">
                                <label for="period">Period</label>
                                <select class="form-control" id="period" name="period">
                                    <option value="">All Time</option>
                                    <option value="">Today</option>
                                    <option value="">This Week</option>
                                    <option value="">This Month</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="country_list">Country</label>
                                <select class="form-control" id="input_country" name="input_country">
                                    <option value="">All (WorldWide)</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div><!--- END Site Content --->
    </div><!-- END Content -->

2
  • fuciona mas como alinharia os dois campos do formulario a direita? poque eles então encostados no Top countries
    – Ricardo
    8/01/2015 às 16:45
  • @RicardoHenrique o Bootstrap tem uma classe chamada pull-rigth, provavelmente vai funcionar se você adicionar nos grupos, por exemplo: <div class="form-group pull-right">, só não testei porque estou sem tempo agora, mas é bem provável que funcione.
    – KaduAmaral
    8/01/2015 às 22:33
1

Você pode aplicar display: inline-block;, ao span e ao form e você provavelmente irá conseguir o resultado desejado, algo como:

#form_filter div.row > form, #form_filter div.row > span {
   display: inline-block;
}

Porém mesmo que você ajuste ele para inline-block ainda sim terá um problema, a responsividade.

Os elementos internos do <form> são responsivos e se ajustam uns aos outros, porém não trabalha direito com elementos "tios".

É necessário que o seu <span> fique dentro do <form> se você quiser acompanhar o efeito de responsividade.

Um exemplo:

#form_filter span.titulo {
    display: inline-block;
}
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div class="wrapper" role="main"><!-- START Content -->
        <div class="container"><!--- START Site Content --->
            <div class="row">
                <div id="form_filter" class="col-md-8" style="border:2px solid red">
                    <div class="row">
                        <form class="form-inline" role="form" action="#" method="get">
                            <span class="titulo">Top Countries</span>
                            <div class="form-group">
                                <label for="period">Period</label>
                                <select class="form-control" id="period" name="period">
                                    <option value="">All Time</option>
                                    <option value="">Today</option>
                                    <option value="">This Week</option>
                                    <option value="">This Month</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="country_list">Country</label>
                                <select class="form-control" id="input_country" name="input_country">
                                    <option value="">All (WorldWide)</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div><!--- END Site Content --->
    </div><!-- END Content -->

Além de manipular o CSS, você também pode tentar usar os grids (apenas uma sugestão):

http://getbootstrap.com/examples/grid/

7
  • Olá @GuilhermeNascimento irei realizar o teste, por favor verifique a mensagem postada aqui Chat
    – Ricardo
    8/01/2015 às 16:21
  • @RicardoHenrique as questões levantadas no chat não é bem as mesma da pergunta, recomendo que edite a pergunta, grato 8/01/2015 às 16:27
  • As questões levantadas não são relacionadas a esta qustão porem ela é muito grande para ser postada aqui sem ser banida por possuir multiplas resposatas adeequadas
    – Ricardo
    8/01/2015 às 16:28
  • @RicardoHenrique eu acredito que se você ficar no objetivo final ao formular uma questão dificilmente ela será fechada, qualquer questão fechada pode ser reaberta, não existe banimentos :) 8/01/2015 às 16:30
  • irei então postar aqui no site
    – Ricardo
    8/01/2015 às 16:33

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 .