CSS, vertical alignment: medium with bootstrap

Question

I have a fairly simple problem with HTML / CSS, which is also often asked, but, unfortunately, I could not get it to work even after my research.

I am using Bootstrap (3 RC2) and I would like to vertically align the image in the middle of the line.

<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, this does not seem to work. You can see the problem using this script: http://jsfiddle.net/veQKY/2/

The requirement not to violate Bootstrap responsiveness i.e. when using a device with a small width, the second image should be stitched horizontally below the first image.

Answer 1

 .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 

Answer 2

Everything will be fine. Use this for this section. It is aligned vertically and horizontally.

 display:flex; justify-contents:center; align-items:center; 

Answer 3

The thing is, you need columns with 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 of it is taken here: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Here you can see the violin

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

Answer 4

 <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 used only inside elements

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

so on top: 50%; then the upper half of the image height (58 pixels)

then the image will be 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> 

Answer 5

 <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 this div.

Answer 6

The problem is resolved.

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 script: http://jsfiddle.net/afKDJ/show

Answer 7

This is probably not a very elegant solution, but this one 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/

Answer 8

 <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 parent div image

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