html - 图片标题都是alingn。如何使每个元素垂直对齐？

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 实现所需的结果，如果有，怎么做？

演示

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

演示

您的演示已更正

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