CODEWITHSUNDEEP
csstwitter-bootstrap-3vertical-alignment
madhead
madhead

Reputation: 33441

Verticaly align a group of buttons between two stacked selects in Bootstrap 3

I'm implementing a permission-to-role assignment screen using Bootstrap 3 modal. Please, see a demo of current state in full screen, so the selects are not stacked under each other, but aligned aside. As you see, now the buttons are sticked to the top, but I want to place them in one columnt at the center of modal:

enter image description here

The code is trivial, check plunkr for details:

<div class="modal-header">
  <h3 class="modal-title">Role permissions</h3>
</div>
<div class="modal-body">
  <div class="row">
    <div class="col-md-5 form-group">
      <label for="availablePermission">
        Available permissions
      </label>
      <select id="availablePermission" class="form-control" size="14">
        <optgroup label="General">
          <option value="0">Change password</option>
          ...
        </optgroup>
      </select>
    </div>
    <div class="col-md-2">
      <button class="btn btn-primary">
        <i class="fa fa-fw fa-angle-right"></i>
      </button>
      <button class="btn btn-primary">
        <i class="fa fa-fw fa-angle-left"></i>
      </button>
    </div>
    <div class="col-md-5 form-group">
      <label for="existingPermission">
        Assigned permissions
      </label>
      <select id="existingPermission" class="form-control" size="14">
        <optgroup label="General">
          <option value="1">View users</option>
          ...
        </optgroup>
      </select>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-primary">OK</button>
  <button class="btn btn-warning">Cancel</button>
</div>

I've tried flexbox for middle column with display: flex and flex-direction: column but the buttons didn't move a pixel. display: table-cell and vertical-align: middle does not work either. Is it possible to beautifuly centrify them without using hard-coded dimensions?

Upvotes: 0

Views: 464

Answers (2)

jcdenton
jcdenton

Reputation: 361

Managed to get it working with flexbox, though losing a bit of adaptiveness: try changing the width - selects won't stack vertically now :( Adding a @media query (similar to the one for Bootstrap's *-md) will fix this.

  @media (min-width: 992px) {
    .flex-row {
      display: flex; 
    }
  }

  .flex-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
  }

Plunkr

Upvotes: 1

Zenorbi
Zenorbi

Reputation: 2644

Since you probably know the height of the 2 buttons, you can do this:

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: THEWIDTHpx;
height: THEHEIGHTpx;

Also you need to put position: relative; to the row. This will center the box with 2 buttons perfectly in the middle of the row.

If you're using floats to put divs next to each other, make sure the row has a clearfix.

Upvotes: 1

Related Questions