Vertically center a span

Question

Vertically center a span

Navigation

#1 by (2 votes)
#2 by (1 votes)

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

Image:

Howtostay:

html css twitter-bootstrap bootstrap-3

asked by anonymous 07.01.2015 / 20:47

2 answers

2

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

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

The rest you can do with a class and so on.

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!--LatestcompiledandminifiedCSS--><scripttype="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 -->

08.01.2015 / 17:38

Two Forms working on the same resultset How to display the values of a JSON via PHP?

score 1 · Accepted Answer

You can apply display: inline-block; , span and form , and you'll probably get the desired result, something like:

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

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

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

It is necessary that your <span> stay within <form> if you want to follow 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><!--LatestcompiledandminifiedCSS--><linkrel="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><divclass="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 -->

Besides manipulating CSS, you can also try to use grids (just a suggestion):

link