在 <td> 中居中 <img>

Question

我正在尝试使用 CSS 在 table 中将图像居中。 Whosebug 让其他人遇到同样的问题并使用 margin:0 auto, text-align:center、and/or display:block 解决了他们。其中 None 迫使 <img> 在我的 table 单元格中居中。

http://fcilluminateconsulting.com/whats-my-card/

Answer 1

您为此规则设置了 text-align: right; 而不是 center：

td.first-col, td.third-col, td.fifth-col, td.seventh-col {
    text-align: right;
}

改成这样就可以了：

td.first-col, td.third-col, td.fifth-col, td.seventh-col {
    text-align: center;
}

Answer 2

您的 img 标签正在 float:left 属性来自 style.css

在线号。 16、添加float:none属性

table.cards td img {
    border: 1px solid black;
    display: block;
    margin: 0 auto;
    text-align: center;
    float: none; // give this property !
}

Answer 3

您的 img 标签的样式为 float:left 改变它。

media="all"
img {
    max-width: 100%;
    height: auto;
    float: left;
    display: block;
    margin-right: 1em;
}

到

media="all"
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-right: 1em;
}

在 <td> 中居中 <img>

Centering an <img> in a <td>

css

html-table

centering