图像标题都对齐。如何使每个元素垂直对齐？

Question

我正在创建一个页面，列出网站的所有赞助商，其中包含徽标及其名称。问题是我无法对齐标题，因为标识具有不同的高度。结果是这样的：

但我希望得到以下结果：

每个赞助商列表的HTML都是：

<div class="one_fourth">
    <a href="LINK_TO_SPONSOR">
        <img src="URL_TO_IMAGE" />
    </a>
    <h3>Sponsore Title</h3>
</div>

我的图片上应用的CSS如下：

img
{
    display: block !important;
    max-width: 100% !important;
}

有没有办法用CSS获得所需的结果？如果有，怎么做？

DEMO

Answer 1

如果您插入包含链接和图像的div并将高度设置为div，则可以对齐文本 试试这个：

  <div class="one_fourth">
     <div class="img">
         <a href="LINK_TO_SPONSOR">
            <img src="URL_TO_IMAGE" />
         </a>
     </div>
     <h3>Sponsore Title</h3>
 </div>

在你的CSS中为该div添加一个类，设置图像的最大高度

.img{
   height:100px; 
}

DEMO

YOUR DEMO CORRECTED

Answer 2

诀窍是拍摄列表中最大的图片并记下它的大小。 比如说，你最大的图片是150x200像素。

宽度：150px; 身高：200px;

现在，这将是img div。

<div class="one_fourth">
    <div class="img">
        <img src="URL_TO_IMAGE" />
    </div>
    <a href="LINK_TO_SPONSOR">Link</a>    
</div>

#.one_forth{
 float: left; /* This is the most important thing here */
 "You could make the width 150px here and assign a width of 100% for .img. It varies with what you want.";
}

.img{
    display: block !important;
    width: 150px !important;
    height: 200px !important;
}

.img img{
    float: left;
}

.one_fourth a{
    "Your Style Here";
}