Bootstrap center div to other's

Question

I'm using a template with Bootstrap.

The following code:

<div class="row mix-grid thumbnails wrapper white" id="pictures_placeholder">
            <div class="col-md-3 col-sm-4 mix ">
                <div class="mix-inner">
                    <img class="img-responsive" src="../../../assets/admin/pages/media/works/img1.jpg"
                         alt="">

                    <div class="mix-details picture-bottom-label">
                        <div class="row">
                            <div class="col-md-12 col-xs-12">
                                <div class="col-md-4 col-xs-3">
                                    <img src="../../../assets/admin/pages/media/profile/profile_user.jpg"
                                         class="img-responsive img-circle profile-pic"
                                         alt=""
                                            />
                                </div>
                                <div class="col-md-8 col-xs-8 text-left user-name">Asaf Nevo</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

does this:

enter image description here

How can I make the name (Asaf Nevo) to be entered to the image ?

You can easily do it by adding your custom CSS external or inline CSS — , Mar 15 '15 at 14:26

score 0 · Answer 1 · answered Mar 15 '15 at 14:03

0

try adding this to CSS:

div.user-name{height:92px;line-height:92px;}

hope that helps.

answered Mar 15 '15 at 14:03

geevee

5,411
5
30
48

score 0 · Answer 2 · answered Mar 15 '15 at 14:06

0

Put the name in the same div as the image. Make both inline.

<img src="../../../assets/admin/pages/media/profile/profile_user.jpg"
    class="img-responsive img-circle profile-pic" alt="" />Asav Nevo

Now play with the CSS property vertical-align. Something like vertical-align: middle could work and yes, this property should be applied to the surrounding div if not mistaken, potentially also to the inline content itself. I cannot try it right now.

answered Mar 15 '15 at 14:06

ReneS

3,535
2
26
35

Bootstrap cannot do everything, check these out: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 http://stackoverflow.com/questions/25538732/bootstrap-how-to-get-text-to-vertical-align-in-a-div-container http://stackoverflow.com/questions/18192114/how-to-use-vertical-align-in-bootstrap – ReneS Mar 15 '15 at 14:18

score 0 · Answer 3 · edited Mar 15 '15 at 20:59

0

Add this to the css:

.user-name {
  margin-top:50%;
}

edited Mar 15 '15 at 20:59

jenzz

7,239
6
49
69

answered Mar 15 '15 at 14:31

Sujay sreedhar

3,498
2
21
28

Bootstrap center div to other's

3 Answers3