Как сделать изображение с фиксированным размером совпадающим по вертикали?

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>

Изображение находится в верхней части кол. как сделать его вертикальным?

Answer 1

плз попробовать это одно:

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

Answer 2

ти, чтобы использовать это в стиле

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