How to make fixed-size image align vertical middle?

Question

.image-fixed-size-and-vertical-middle {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    padding-top: auto;
    padding-bottom: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<ul class="list-group">
    <li class="list-group-item">
    <div class="col-xs-3 col-md-2">
        <div class="image-fixed-size-and-vertical-middle">
        <img class="img-responsive" src="http://placehold.it/122x122">
    </div>
              </div>
    <div class="col-xs-9 col-md-10">
        <h4>header</h4>
        <p>content</p>
    </div>
    <div class="clearfix"></div>
    </li>
  </ul>

The image is in the top of col. how to make it vertical middle?

did not get your point? you want image in center of page or what? — Leo the lion, Aug 13 '15 at 08:29
possible duplicate of [How to make a floated div 100% height of its parent?](http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent) — klaar, Aug 13 '15 at 08:49
The `div`s in your example have been assigned (by bootstrap) the attribute `float: left;`, thus this problem is about floating elements not having their parent's height, therefore flagged as duplicate. — klaar, Aug 13 '15 at 08:50

score 0 · Answer 1 · answered Aug 13 '15 at 09:25

ty to use this in style

<style>
.image-fixed-size-and-vertical-middle 
{
    position:relative;
    min-height:69px;
}
.image-fixed-size-and-vertical-middle img 
{
    width: 40px;
    height: 40px;
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    margin:auto;
}
</style>

score 0 · Accepted Answer · answered Aug 13 '15 at 09:33

plz try this one:

Html:

 <div class="image-fixed-size-and-vertical-middle">
      <img class="image" src="http://www.mictronics.de/yampp_color_themes/bmp0_test_image.bmp" />
    </div>

Css

 .image-fixed-size-and-vertical-middle{
    display:table-cell;
        vertical-align:middle;
    position:fixed;
    width:100%;
    text-align:center;
    z-index:600;
    cursor:pointer;
    left:0;
    top:100px;
    }



    .image-fixed-size-and-vertical-middle img{
    position:relative;
    height:100px;
    border:1px solid grey;
    }

How to make fixed-size image align vertical middle?

2 Answers2