Question

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

.QuickLink {
  display: inline-block;
  border: 2px solid #9FAFEC;
  border-radius: 4px;
  text-align: center;
  width: 100px;
  vertical-align: top;
  margin-top: 4px;
  padding: 2px;
  height: 160px;
}

.QuickLink img {
  width: 80px;
  margin: auto;
}

.QuickLink a {
  text-decoration: none;
  color: black;
}

<div class="QuickLink">
  <a href="someLink.htm">
    <img src="images/Directory.jpg" title="Directory">
    <br> Directory
  </a>
</div>

我正在寻找的是一组矩形，其中图像垂直对齐中间，文本位于底部。以下让我接近，但我不知道如何进行垂直对齐。

Answer 1

解决方案1 （推荐）

.QuickLink {
    position: relative;
}

.QuickLink a {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

解决方案2

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

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

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

.QuickLink {
    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;
}

如果要水平对齐.QuickLink，请将它们包装在容器内。

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

并像这样设置容器：

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

Answer 2

通过将显示调整为inline-flex以及在锚标记上将顶部和底部边距设置为自动，我能够实现您的目标。

查看this jsfiddle

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

Answer 3

当您使用固定高度作为包装时，您可以在a标签上使用position:absolute。它们的左上角为50％，然后使用transform：

来补偿标签的高度

https://jsfiddle.net/ymv6bL7s/7/

.QuickLink
{
  display: inline-block;
  border:2px solid #9FAFEC ;
  border-radius:4px;
  text-align: center;
  width:100px;
  vertical-align: top;
  margin-top:4px;
  padding:2px;
  height:160px;
  position:relative;
}

.QuickLink img
{
  width:80px;
  margin: auto;
}  

.QuickLink a 
{
  text-decoration: none;
  color:black;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

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

Answer 4

您可以使用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
}

小提琴：https://jsfiddle.net/JacobDesight/ymv6bL7s/8/

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

4 个答案: