html – 如何垂直居中可以在div中改变大小的图像？

2023年2月8日 230次阅读

当我不知道图像的高度是多少时,如何用css垂直居中图像？图像以及高度将由服务器在运行时提供,并且可以是任意数量的高度.知道了这一点,我在div中创建了一个div,或多或少遵循这里找到的教程的方法1：
http://phrogz.net/css/vertical-align/.但是只有当你知道你试图集中的内容的高度时才会有效,我相信.那么我该如何垂直居中呢：

<div class="galleryItem">
    <a href="wherever">
    <img src="whatever" width="173" height="155">
       <div class="galleryTitle">
           <div class="galleryImg">
               <img src="centerMeVertically.jpg">
           </div>
       </div>
    </a>
</div>

这是失败的CSS：

   .galleryItem {
    float: left;
    border-style: solid;
    border-width: 1px;
    border-color: #b78e18;
    margin: 7px 4px;
    padding: 5px;
    width: 173px;
    height: 190px;
    position: relative;
}

.galleryTitle {
    height: 33px;
    width: 173px;
    position: relative;
}

.galleryImg {
     width: 173px;
     height: 30px;
     position: absolute;
     top: 50%;
     margin-top: -15px;
 }

.galleryImg > img {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

最佳答案 表格单元具有将其内容与垂直中心对齐的能力.所以我们需要通过将div的’display’属性更改为’table cell’来将div的行为更改为table-cell.

现在请检查下面的代码,看到相应div中的图像垂直对齐到中心.

.galleryImg {
   display: table-cell;
   height: 60px;
   vertical-align: middle;
   width: 173px;
}

希望它会对你有所帮助.

点赞