Aligning content (Vertically and Horizontally) in a list group in Bootstrap

Question

I have a row with three divisions:

Image (two divs, text and text) Button

The only thing I'm able to do is pulling the button to right or bottom of the div, but not centering it, how can I achieve this?

My code:

<div class="row">
    <div class="col-md-9 ">
        <div class="row">
            <div class="col-md-12">
                <h3>
                    h3. Lorem ipsum dolor sit amet.
                </h3>
            </div>
        </div>
        <div class="row list-group-item ">

            <div class="col-md-3 text-center">
                <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-circle">
            </div>
            <div class="col-md-5 ">
                <div class="row">
                    <div class="col-md-6 ">
                        <h3>
                            h3. Lorem ipsum dolor sit amet.
                        </h3>
                    </div>
                    <div class="col-md-6">
                        <h3>
                            h3. Lorem ipsum dolor sit amet.
                        </h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">

                <button type="button" class="btn btn-success btn-lg pull-right">
                    Default
                </button>
            </div>

        </div>
    </div>

This is what I have:

This is what I want but I'm not able to achieve:

I want the button centred too

Answer 1

First of all no need to use this much nested rows and cols, you should try to achieve this result by using less html elements. Secondly divide your blocks into equal parts (use col-md-3 class four times).

<div class="row list-group-item ">
    <div class="col-md-3 text-center vcenter">
        <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-circle">
    </div>
  <div class="col-md-3 vcenter">
    <h3>
      h3. Lorem ipsum dolor sit amet.
    </h3>
  </div> 
  <div class="col-md-3 vcenter">
    <h3>
      h3. Lorem ipsum dolor sit amet.
    </h3>
  </div>
    <div class="col-md-3 vcenter text-center">
        <button type="button" class="btn btn-success btn-lg">
            Default
        </button>
    </div>
</div>

Finally use vertical alignment for your divs:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    margin-left: -4px;
}

You can check fiddle here: https://jsfiddle.net/johannesMt/npgsnojf/3/ It achievs the same result by using much less html elements which makes your code more readable. Hope this helps!

Answer 2

First things first, You are already dividing some section which already has a width of 100%. (by using two col-6 inside a row). So that means they've been already expanding as far as possible in that row.

You should increase the col number in

 <div class="col-md-5 ">

meanwhile decreasing button column

<div class="col-md-4">

In the end, you can design your structure in the following way:

<div class="row">
    <div class="col-md-6 text-center">
        <div class="centered-block">
            <div>h3. Lorem ipsum dolor sit amet.</h3>
        </div>
    </div>
    <div class="col-md-6 text-center">
        <div class="centered-block">
            <h3>h3. Lorem ipsum dolor sit amet.</h3>
        </div>
    </div>
</div>

with the following css rule:

.centered-block {
  display: inline-block;
  position: relative;
  width: 100px; /* you would like to have a fixed width */
}

.centered-block > h3 {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

Haven't tested it out, but that should work.