How to vertically align contents of div in boostrap?

Question

I have this:

#rightHeader {
  height: 450px;
  vertical-align: middle;
  display: inline-block;
}

<div id="header" class="header">
    <div class="container">
        <div class="row">
            <div id="headerBox" class="col-md-5 text-center">
                <form id="signup" action="" method="post">
                <h1>text</h1>
                <p>text</p>
                <input id="inputField1" class="form-control" placeholder="First Name" type="text" tabindex="1" required>
                <input id="inputField2"  class="form-control" placeholder="Your Email" type="email" tabindex="1" required>
                <input id="inputField2"  class="form-control" placeholder="Password" type="email" tabindex="1" required><br>
                <button class="btn btn-lg btn-primary">Join For Free</button>
                </form>
            </div>
            <div id="rightHeader" class="col-lg-7 text-center">
                <ul>
                    <li>text.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

For the rightHeader text I have to use margin-top just to make the text visible (otherwise it's too high and goes off the screen). How can I verticallycenter the text in the div without using margin-top?

Thanks

can you please custom css which you configured with id(#rightHeader). — Shivang Agarwal, Jun 27 '17 at 04:37

score 2 · Answer 1 · answered Jun 27 '17 at 04:42

#rightHeader {
  height: 450px;
  vertical-align: middle;
  display: inline-block;
  align-items:center;
  justify-content:center;
  display:flex;
  border:thin black solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="header" class="header">
    <div class="container">
        <div class="row">
            <div id="headerBox" class="col-md-5 text-center">
                <form id="signup" action="" method="post">
                <h1>text</h1>
                <p>text</p>
                <input id="inputField1" class="form-control" placeholder="First Name" type="text" tabindex="1" required>
                <input id="inputField2"  class="form-control" placeholder="Your Email" type="email" tabindex="1" required>
                <input id="inputField2"  class="form-control" placeholder="Password" type="email" tabindex="1" required><br>
                <button class="btn btn-lg btn-primary">Join For Free</button>
                </form>
            </div>
            <div id="rightHeader" class="col-lg-7 text-center">
                <ul>
                    <li>text.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Is this the same that you are looking for?

Hope this helps.

score 0 · Answer 2 · answered Jun 27 '17 at 04:39

0

Have a look at CSS3 flexbox. You can do a lot of with it. This should be it:

#rightHeader {
  height: 200px;
  display: flex;
  align-items: center;
  border: 1px solid #666;
}

<div id="rightHeader" class="col-lg-7 text-center">
    <ul>
        <li>text.</li>
    </ul>
</div>

answered Jun 27 '17 at 04:39

Schlumpf

358
1
3
13

The text is still at the top of the div – Joe Sgg Jun 27 '17 at 04:45
Which Browser are you using? It works even in Microsoft Edge... In my Browser its centered – Schlumpf Jun 27 '17 at 04:55

score 0 · Answer 3 · answered Jun 27 '17 at 04:47

I use the line-height property and then reset it on the child element

#rightHeader {
  height: 300px;
  width: 250px;
  line-height: 300px; /* same as div height */
  display: inline-block;
  background: #999;
  text-align: center;
}

#rightHeader ul {
  padding: 1px;
  display: inline-block;
  line-height: normal; /* reset it here */
}

<div id="rightHeader" class="col-lg-7 text-center">
  <ul>
    <li>text.</li>
  </ul>
</div>

How to vertically align contents of div in boostrap?

3 Answers3