水平对齐表格单元格元素答案

【问题标题】：Horizontally align table cell element水平对齐表格单元格元素
【发布时间】：2020-09-03 17:35:48
【问题描述】：

我有一个表格单元格元素，我试图水平和垂直对齐，但我只能设法让 1 工作，那就是垂直对齐。

图像没有固定大小，因此它必须是流动的，并且可以使用最大高度、宽度...

CSS

.prod-img {
  display: block;
  margin: 20px; 
  border:1px solid black;
}
.prod-img a {
  max-width: 170px;
  height: 150px;
  display: table-cell;
  vertical-align: middle;
}
.prod-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  max-height: calc(100% - 30px);
  margin: 0 auto;
}

http://jsfiddle.net/mjx4xvgj/1/

【问题讨论】：

使用：fiddle
我假设对齐是指水平和垂直居中？您需要将其显示为表格单元格的任何特殊原因？

标签： html css

【解决方案1】：

使用正确的display:

将margin: auto 和display: block 用于<a>。
将display: inline-block 用于<img />

代码：

.prod-img {
  display: block;
  margin: 20px; border:1px solid black;
  text-align: center;
  vertical-align: middle;
}
.prod-img a {
  max-width: 170px;
  height: 150px;
  line-height: 150px;
  display: block;
  vertical-align: middle;
  margin: auto;
}
.prod-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  max-height: calc(100% - 30px);
  margin: 0 auto;
  vertical-align: middle;
}

预览：

小提琴：http://jsfiddle.net/1zLLasfw/

【讨论】：

:( 在 Firefox 中我没有垂直对齐。
@Aaron 它现在垂直对齐。对不起。你能检查并删除反对票吗？
真棒 Praveen，只见树木不见森林！谢谢
这是我的反对票。修复后不需要，因此删除。但是在答案中使用vertical-align:middle 是相当分散的。唯一需要的是.prod-img img
@Alohci 感谢您让我知道并纠正我。 :)

【解决方案2】：

只需使用以下内容更改 CSS，即可获得输出：

.prod-img {
    display: table;
    margin: 20px; border:1px solid black;
    width : 100%;
}
.prod-img a {
    max-width: 170px;
    height: 150px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.prod-img img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    max-height: calc(100% - 30px);
    margin: 0 auto;
}

也许对你有帮助。

【讨论】：

【解决方案3】：

在风格上使用它可能会对您有所帮助

.prod-img {
    border: 1px solid #000000;
    display: table;
    margin: 20px;
    width: 100%;
}
.prod-img a {
    display: table-cell;
    height: 150px;
    max-width: 170px;
    text-align: center;
    vertical-align: middle;
}

【讨论】：