HTML 将文本与带图像的按钮底部对齐

Question

我有 198px-198px 的方形按钮。每个按钮下面都有一个图像和文本。由于并非所有图像都是方形的，我将所有图像的最大宽度和最大高度设置为 128px，以便它们按比例缩放。不幸的是，我无法再将文本与底部居中对齐。

我无法使用 padding-top: 65px 解决了其他一些 SO 问题，因为图像的高度可变。

我在文本的跨度中尝试了 position: absolute; top: 180px，但在那之后我无法将其居中（不能只指定 left: 10px，因为文本的长度可变）

感谢您的帮助。

这是一个 JSFiddle https://jsfiddle.net/vbgg3keu/3/（注意：您可以扩展输出窗格的宽度，以便所有按钮都排在同一行）

HTML:

<button class="square-button">
<img class="small-img" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/><br/>

<span class="button-text">This text is too high</span>
</button>

<button class="square-button">
<img class="small-img" src="http://etc.usf.edu/clipart/36400/36459/ruler1_36459_lg.gif"/><br/>

<span class="button-text">This text is too high</span>
</button>

<button class="square-button">
<img class="small-img" src="https://tall.life/wp-content/uploads/2013/04/Giraffe.jpg"/><br/>

<span class="button-text">This text is the correct height</span>
</button>

<button class="square-button">
<img class="small-img" src="https://lh3.googleusercontent.com/dB3Dvgf3VIglusoGJAfpNUAANhTXW8K9mvIsiIPkhJUAbAKGKJcEMPTf0mkSexzLM5o=w300"/><br/>

<span class="button-text">This text is the correct height</span>
</button>

CSS:

.square-button {
  width: 198px;
  height: 198px;
  float: left;
}
.small-img {
    max-width: 128px;
  max-height: 128px;
}

.button-text {
  // this doesn't work because now I can't center the text
  //position: absolute;
  //top: 180px;
}

Answer 1

您可以将方形按钮 class 设置为相对位置并使用百分比放置文本，同时将宽度跨度为 100%：

https://jsfiddle.net/vbgg3keu/4/

.button-text {
  position: absolute;
  bottom: 5%;
  width: 100%;
  left: 0%;
}

.square-button {
  width: 198px;
  height: 198px;
  float: left;
  position: relative;
}

Answer 2

试试下面的代码：

.square-button {
    width: 198px;
    height: 198px;
    float: left;
    position: relative;
}
.small-img {
    max-width: 128px;
    max-height: 128px;
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%,-50%);
}

.button-text {
    position: absolute;
    transform: translateX(-50%);
    bottom: 10px;
    width: 100%;
    left: 50%;
}

在https://jsfiddle.net/vbgg3keu/10/

HTML 将文本与带图像的按钮底部对齐

HTML Align Text to Bottom of Button with Images

html

css

text-align

text-alignment