How to make a fixed size image align the vertical medium?

advertisements
.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?


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;
    }