Html 使用文本设置一组图像的样式

我试图使一组图像/文本看起来一致，但图像的分辨率不同。我有一套这样的：

.QuickLink{
显示：内联块；
边框：2px实心#9FAFEC；
边界半径：4px；
文本对齐：居中；
宽度：100px；
垂直对齐：顶部；
利润上限：4倍；
填充：2px；
高度：160px；
}
.QuickLink img{
宽度：80px；
保证金：自动；
}
.快速链接a{
文字装饰：无；
颜色：黑色；
}

---

解决方案1（推荐）

解决方案2

.QuickLink {
    display: table;
    float: left;    // if you want them to align horizontally
}

.QuickLink a {
    display: table-cell;
    vertical-align: middle;
}

解决方案3（可能存在浏览器兼容性问题）

如果要水平对齐

.QuickLink

，请将它们包装在容器中

<div class="container">
    <div class="QuickLink">
        ...
    </div>
</div>

---

通过将显示调整为内联flex，以及在锚定标记上将上下边距设置为自动，我能够实现您想要的

退房

.快速链接
{
显示：内联flex；
证明内容：中心；
边框：2px实心#9FAFEC；
边界半径：4px；
文本对齐：居中；
宽度：100px；
利润上限：4倍；
填充：2px；
高度：160px；
}
.QuickLink img
{
高度：50px；
宽度：自动；
}
.快速链接a
{
文字装饰：无；
颜色：黑色；
保证金：自动0；
}

当您为包装使用固定高度时，您可以在a标签上使用

位置：绝对值。它们的位置为左上角的50%，然后使用变换补偿标记的高度：



.QuickLink
{
显示：内联块；
边框：2px实心#9FAFEC；
边界半径：4px；
文本对齐：居中；
宽度：100px；
垂直对齐：顶部；
利润上限：4倍；
填充：2px；
高度：160px；
位置：相对位置；
}
.QuickLink img
{
宽度：80px；
保证金：自动；
}  
.快速链接a
{
文字装饰：无；
颜色：黑色；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
您可以使用flexbox来执行以下操作：

.QuickLink a 
{
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  color:black;
}

但是，现在图像不会完全位于div的中心，因为底部的文本会占据某些位置。如果您想更改，您需要在HTML中进行一些调整，即在
SPAN
标记中包装文本，将它们设置为绝对位置，并将相对位置添加到
a
标记：

.QuickLink span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.QuickLink a {
  [...]
  position: relative
}

Fiddle:
固定高度或多或少是我在尝试解决的问题，只要它们最终都达到相同的高度，我就不会依附于它。永全答案提供了您可能需要的所有解决方案，以及正确的浏览器前缀。非常彻底，我将使用你的第一个解决方案。如果我想把文本放在底部，我需要把它包起来，对吗？
.container {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
}

 <div class="QuickLink" > 
        <a href="someLink.htm">
             <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" title="Directory">
             <br>
             Directory
        </a>
    </div>

 <div class="QuickLink" > 
        <a href="someLink.htm">
             <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmzMFjujgib4Md4MHoGD4VoIDwqjaG3DDrylUns_rY8dgSuybA" title="Info">
             <br>
             Info
        </a>
    </div>
.QuickLink
    {
        display: inline-flex;
    justify-content:center;
        border:2px solid #9FAFEC ;
        border-radius:4px;
        text-align: center;
        width:100px;

        margin-top:4px;
        padding:2px;
        height:160px;
    }

    .QuickLink img
    {
      height:50px;
        width:auto;
    }

    .QuickLink a 
    {
        text-decoration: none;
        color:black;
        margin:auto 0;
    }

.QuickLink a 
{
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-decoration: none;
  color:black;
}

.QuickLink span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.QuickLink a {
  [...]
  position: relative
}