Bootstrap CSS Alignment

Question

I have been trying to get some alignment to work but I am having a hard time being successful. I'm not sure if there is already a CSS style in bootstrap for vertical alignment or not but that is what I am trying to accomplish.

I have a DIV (.well class) with an image and some text inside it. The Image aligns fine as its responsive so the height and placement is good. However, I am trying to align the button and Text vertically in the middle.

Here is a jsFiddle: http://jsfiddle.net/6z9skpeh/

<div class="col-md-6">
    <div class="well wellFriends">
        <div class="row">
            <div class="col-md-4 friendPic">
                <img src="http://oi62.tinypic.com/289j41s.jpg" class="img-responsive">
            </div>
            <div class="col-md-8 friendDetails">
                <div class="row">
                    <div class="col-md-6"><strong>Bob Smith</strong>
                        <br><em>Department Name</em>
                    </div>
                    <div class="col-md-5 pull-right">
                        <!-- Single button -->
                        <div class="btn-group pull-right">
                            <button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-expanded="false">Friends <span class="caret"></span>

                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a>
                                </li>
                                <li><a href="#">Another action</a>
                                </li>
                                <li><a href="#">Something else here</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

This is what I have so far: enter image description here

This is what I am trying to do: enter image description here

http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers have a look at the correct answer — sanjith edward, Feb 10 '15 at 07:07
Possible repeat of http://stackoverflow.com/questions/11184868/vertically-center-bootstrap-btn-in-well-class ? — grownupteeth, Feb 10 '15 at 15:28

score 3 · Accepted Answer · answered Feb 10 '15 at 07:20

3

You can try like this: demo

css:

.v_align {
    font-size: 0;
}
.v_align >[class*="col"] {
    float: none;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}

HTML:

 <div class="row v_align">..</div>

answered Feb 10 '15 at 07:20

G.L.P

7,119
5
25
41

Bootstrap CSS Alignment

1 Answers1