Center vertically div container on Bootstrap page

Asked

Viewed 37,912 times

8

I’m having trouble centralizing À Pagina because centralizing both sides has already been accomplished, I’ve added several classes and attributes in the tag style but I did not succeed, and to better illustrate what happened I took a print and placed arrows but show the difference between the upper and lower side Head code:

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

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

Interface Image (Pepsi Logo is only illustrative)

inserir a descrição da imagem aqui

twitter-bootstrap

  • Could add the content of <head> just to know which version you’re using

  • Added the <head>

  • It is version 3.3.1?

  • Colorize all edges of Divs for easy viewing

  • Yes the Last Version

4 answers

6


Viewing the "Box" with the Firefox Element Inspector, I noticed that the element <div class="container span7 text-center col-md-4 col-md-offset-3" ...> (width = 419px) is smaller than the element width <div class="row"> (width = 449px), this hindered manipulating the elements using margin-top, top, position, etc..

So the best way was to create separate elements, there are two more practical ways of doing this.

Using the CSS flex

Note that the property flex not yet supported by some browsers (some mobile browsers for example)

The first way is by using the "flex" property and setting the height as 100%, note that to align the elements we use 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%;
}

The html should look like this:

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

Using position and top

The second way, which is supported by older browser, would be using the height of the "container" element that I captured with the Inspector and this proved to be 116px (except the edges should decrease):

Calculating this the code should look something like:

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

Explaining the code:

  • In the first DIV, I used position: absolute; to facilitate vertical alignment
  • I fixed the height according to the height of the "container" and applied top: 50% to align in the center of the screen
  • I used left: 0, for left: auto (standard of the elements) ends up positioning the element according to the origin
  • In the second DIV, I set the height and used position: relative; to use the property top
  • To align the second DIV I took the standard height of the "container" element and divided by "2" (116/2 = 58) and set it down in a negative way top: -58px;

Note: Just a hint, avoid "inline" styles, then you can move the whole CSS to your stylesheet, or if you don’t, create a call main css. (never change library style sheets, like bootstrap.css for example).

The code should look something like:

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

  • It worked, but when decreasing the size of the browser the container spans (and everything inside it), the inline style is only for quick test and to be easy to share here

  • @Richerdohenrique It’s not quite this, it’s just that in bootstrap col-md-* uses percentage, if you want you can fix the width of the element <div style="position: relative; height: 116px; top: -58px; height: 116px;"> using "width". See I edited the answer, added an example with "flex".

  • It worked perfectly again thank you.

-1

Cara uses the class col-md-offset-4 the size of the off-set can vary according to your grid when you want to center, remembering to obey the standard of 12 columns.

  • I am already using col-Md-offset-3, and test with col-Md-offset-4 and is not centered vertically

  • Cara uses container-Fluid and Row-Fluid, it adjusts automating the ratio, the Layout must be breaking in resolution.

-1

Bootstrap 3 Simply call the class "centered" on the Divs with the class "col-lg-", "col-Md-", "col-Sm-" or "col-Xs-" (1-12).

  • didn’t work, I just tested

-1

Well, as far as I know, the bootstrap has no components to scale vertically.

Use the property margin-top within form style.

example:

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

Browser other questions tagged twitter-bootstrap

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