Question

＆＃13;

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

＆＃13;

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

＆＃13;

图像位于col的顶部。如何使它垂直中间？

Answer 1

ty以风格使用

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

Answer 2

试试这个：

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

如何使固定尺寸的图像对齐垂直中间？

2 个答案: