8

I have a quite simple HTML/CSS problem which is also quite frequecently asked, but unfortunately I did not get it to work also after doing my research.

I am using Bootstrap (3 RC2) and I'd like to vertical align an image into the middle of a row.

<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
    <div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle;">
        <img src="http://placekitten.com/100/116"  width="100" height="116" />
    </div>
</div>

The second, smaller image should be vertically centered in the middle of the div.row. However, it does not seem to work. You can see the problem using this fiddle: http://jsfiddle.net/veQKY/2/

It is a requirement to not break the responsiveness of Bootstrap, i.e. when using a device with small width the second image should be stapled horizontally beneath the first image.

dirkk
  • 6,160
  • 5
  • 33
  • 51

8 Answers8

3
.centerFlex {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
http://jsfiddle.net/veQKY/2/ check this link worked
user3778043
  • 197
  • 1
  • 4
3

It will work fine. Use this for that section. It is aligned vertically and horizontally.

display:flex;
justify-contents:center;
align-items:center;
Mohaideen Ismail
  • 314
  • 4
  • 21
  • 1
    For some reason I cannot get this to work in Safari, even though it should be supported (display: -webkit-flex;). It works in Chrome and Firefox just fine, just Safari displays it stubbornly top-aligned. Any ideas? – A. Steenbergen Jul 06 '15 at 10:34
1

The point is that you need the columns to have the same height, so maybe you could do something like this:

Your html

<div class="container container-sm-height">
    <div class="row row-sm-height">
        <div class="col-xs-12 col-md-6 col-sm-height">
            <img src="http://placekitten.com/500/700" alt="" width="500" height="700" />
        </div>
        <div class="col-xs-12 col-md-1 col-sm-height col-middle">
             <img src="http://placekitten.com/100/116"  width="100" height="116" style="display: inline-block; vertical-align: middle;" />
        </div>
    </div>
</div>

Your css

/* columns of same height styles */
.container-xs-height {
    display:table;
    padding-left:0px;
    padding-right:0px;
}
.row-xs-height {
    display: table;
}


[class*="col-"] {
    float: left;
    display: block;
    vertical-align: middle;
    text-align: center;
}


img{
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {


    [class*="col-"] {
        float: none;
        display: table-cell;
        vertical-align: middle;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table;
        padding-left:0px;
        padding-right:0px;
    }
    .row-lg-height {
        display:table-row;
    }
    .col-lg-height {
        display:table-cell;
        float:none;
    }
}

Most part of it is taken from here: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Here you can see a fiddle

http://jsfiddle.net/dmdcode/P83kW/

Daniele
  • 1,063
  • 1
  • 10
  • 22
0
<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
    <div class="col-xs-1 col-md-1" style="display: inline-block; top:50%;margin-top:-58px;position:absolute;">
        <img src="http://placekitten.com/100/116"  width="100" height="116" />
    </div>
</div>

vertical-align is only use inside elements

in this case, your image is 100(w) x 116(h)

so top:50%; then margin-top half of image height (58px)

then the image will vertically centered

Update

another method

<div style="background:url(http://placekitten.com/500/700) center no-repeat;width:500px;height:700px;position:relative;">
      <img src="http://placekitten.com/100/116"  width="100" height="116" style="position:absolute;top:50%;margin-top:-58px;right:0;"/>         
</div>
  • This does not work for me as `position: absolute` break the responsive layout. When using a small device the small image should be stacked as well. Here it will just remain in the same position. – dirkk Aug 15 '13 at 09:58
  • add position:relative to your layout –  Aug 15 '13 at 10:17
  • This does not make much sense, it will not change the fact it break the responsiveness – dirkk Aug 15 '13 at 10:37
  • There is much more in the first div than the image. I just created a SSCCE. – dirkk Aug 15 '13 at 12:23
0
<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
    <div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle;">
        <div class="" style="display: table; height: 700px; #position: relative; overflow: hidden;">
          <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
            <div class="" style=" #position: relative; #top: -50%">
              <img src="http://placekitten.com/100/116"  width="100" height="116" />
            </div>
          </div>
        </div>
    </div>
</div>

You need to wrap that div.

Ashwani
  • 3,463
  • 1
  • 24
  • 31
  • uhhh, I would only consider this an approach as absolutely last resort. Using `table-cell` seems very hacky to me. I'd hope there would be a more elegant solution, this reminds me of the old days were we used to use tables for layout purposes. – dirkk Aug 15 '13 at 10:39
  • I tried it now, but it also does not work. I want to take full benefit of the responsiveness offered by bootstrap, i.e. the small image should break if the window width is small. Here it just disappears. – dirkk Aug 15 '13 at 12:24
0

Problem solved.

CSS:

.row {
    display: table!important;
}
.test {
    display: table-cell!important;
    vertical-align:middle;  
}

HTML:

<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
    <div class="col-xs-1 col-md-1 test">
        <img src="http://placekitten.com/100/116"  width="100" height="116" />
    </div>
</div>

Updated Fiddle: http://jsfiddle.net/afKDJ/show

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Avin Varghese
  • 4,340
  • 1
  • 22
  • 31
  • This is basically the same as @Ashwin's approach. I don't like it for the same reasons: It is rather ugly and even more important, it does not work for small screen layout, i.e. it breaks the responsiveness of bootstrap. – dirkk Aug 15 '13 at 12:25
0

Likely isn't a very elegant solution, but this seems to work:

<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
    <div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle; margin-top:-58px; padding-top:50%;">
        <img src="http://placekitten.com/100/116"  width="100" height="116" valign="middle" />
    </div>
</div>

http://jsfiddle.net/4LMKe/

James
  • 11
  • 1
  • Same as for the other proposed solutions: It works for large devices, but it breaks the responsiveness of Boostrap. – dirkk Aug 15 '13 at 14:19
0
<div class="row">
    <div class="col-xs-10 col-md-6" id="main">
        <p><img src="http://placekitten.com/500/700" alt="" width="500" height="700" /></p>
    </div>
<div class="col-xs-1 col-md-1 middle-img">
    <img src="http://placekitten.com/100/116"  width="100" height="116" />
</div>

Apply css on image parent div 

.middle-img {display: table-cell;float: none;height: 300px /*any value*/;vertical-align: middle;}
Dev
  • 129
  • 9