Center vertically on a <span>

Asked

Viewed 1,421 times

1

How can I vertically center a tag (Top countries) with the form?

Code:

<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 -->

Imagery:inserir a descrição da imagem aqui

How it should look: inserir a descrição da imagem aqui

html css twitter-bootstrap bootstrap-3

  • Apparently it is already vertically centered (it would be better with padding: 4px 0). You mean centered horizontally?

  • @Renan was added as the alignment should look, (I’m using bootstrap)

  • (chute) try placing the span inside the form

  • @bfavaretto are now side by side, but still the top countries is just above the form

  • Tried display: inline-block ?

  • @Guilhermenascimento Yes, I’ve used display: inline-block/display:block

  • @Guilhermenascimento float did not resolve the difference between Top Countries and Period

  • @Guilhermenascimento we could continue on Chat

Show 3 more comments

2 answers

2

It’s just a question of tag placement, and a bit of wit. Try to put the element as if it were a form element like this:

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

The rest you can do with a class and etc.

Code:

<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 -->

  • fuciona but how would align the two fields of the formulary to right? because they then leaned on the Top countries

  • @Ricardohenrique Bootstrap has a class called pull-rigth, it will probably work if you add in groups, for example: <div class="form-group pull-right">, I just didn’t test it because I’m running out of time right now, but it’s very likely to work.

1


You can apply display: inline-block;, at the span and to the form and you will probably achieve the desired result, something like:

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

But even if you adjust it to inline-block still have a problem, the responsiveness.

The internal elements of <form> are responsive and fit each other, but does not work right with "uncles elements".

It is necessary that your <span> stay inside the <form> if you want to track the responsiveness effect.

An example:

#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 -->

In addition to handling CSS, you can also try using grids (just a suggestion):

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

  • Hello @Guilhermenascimento will perform the test, please check the message posted here Chat

  • @Ricardohenrique the questions raised in the chat is not quite the same as the question, I recommend editing the question, grateful

  • The questions raised are not related to this quorum but it is too big to be posted here without being banned for having multiple responses

  • @Ricardohenrique I believe that if you stay in the final goal when formulating a question it will hardly be closed, any closed question can be reopened, there are no bans :)

  • I will then post here on the site

  • ,@Guilhermenascimento re-questioned the chat in the questions in the stack

  • @Ricardohenrique I saw his other question, I commented there. But what is it? My answer or that of Kadu helped?

Show 2 more comments

Browser other questions tagged html css twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.