0

How can I center 2 buttons vertically in my view?

For example:

<div class="container">
    <div class="row">
        <div class="col-md-5">
            <h4>My List</h4>
            <div style="height:400px; overflow-y:auto">
                <ul>
                    // List of checkboxes
                </ul>
            </div>
        </div>

        <div class="col-md-2">
            <input type="button" id="btnAddField" class="btn btn-primary" value="Add" />
            <input type="button" id="btnRemoveField" class="btn btn-primary" value="Remove" />
        </div>

        <div class="col-md-5">
            <h4>Selected Fields</h4>
            // This will contain the list selected from the checkboxes.
        </div>
    </div>
</div>

I want the buttons in column 2 to be centered in relation to column 1 (which in this case I made height of 400px.

Jack hardcastle
  • 2,748
  • 4
  • 22
  • 40
John Doe
  • 3,053
  • 17
  • 48
  • 75
  • Is this bootstrap? – Nenad Vracar Jul 21 '16 at 14:50
  • I am using bootstrap. – John Doe Jul 21 '16 at 14:53
  • This question has been asked and answered. Note that bootstrap has little to do with it, as it doesn't provide a means to accomplish this - but there's a few ways to do this -http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div?rq=1 or this http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers?rq=1 or this http://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div?rq=1? – random_user_name Jul 21 '16 at 14:56
  • 2
    @cale_b the question the OP is asking is somewhat different from the others, I think it should stand. – probablyup Jul 21 '16 at 14:58

3 Answers3

0

You can add new class on row that will use Flexbox and vertically center items with align-items: center when width is > 992px which is breakpoint of md DEMO

@media(min-width: 992px) {
  .flex-row {
    display: flex;
    align-items: center;
  }
}
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • I'd be careful of using `align-items` vs `margin: auto` for top & bottom. There are a lot of gotchas that manifest themselves in overflow situations. – probablyup Jul 21 '16 at 14:57
  • That works however it is centering column #3 as well where I only want column #2 to be centered. – John Doe Jul 21 '16 at 16:37
0

Try css Line Height. Hope it will help.

vertical-align: middle;
line-height: 400px;
Pirate
  • 2,886
  • 4
  • 24
  • 42
0

If you can use flexbox, something like this would do what you want (using your existing classes):

.row {
    display: flex;

    [class^="col"] {
        float: none;
        flex-shrink: 0;
        margin: auto 0;
    }
}
probablyup
  • 7,636
  • 1
  • 27
  • 40