html - 图像未定位到中心

Question

我想在单元格中心的表格中显示图像，但这就是我得到的。我的图像覆盖了整个单元格，而不是放在单元格的中心。我正在使用来自 Bootstrap 文件的 img-responsive 类用于图像和表响应类。 此外，每当我加载页面时，我都会随机获得以下输出之一，而代码绝对没有变化。 为什么会这样？？ 在这两种情况下，图像似乎都位于列的左侧，我该如何更正它以使图像位于中心。 以下是代码

<div class="table-responsive inside_content ps-container" style="margin-bottom: 50px">
<style>
    th,td{
        text-align: center;
    }
</style>
<table id="event" class="table table-striped table-responsive">
    <thead>
        <tr>
          <th>Serial No.</th>
          <th>Section</th>
          <th>TimeStamp</th>
          <th>Archive_Status</th>
          <th>Event Picture</th>
          <th>Actions</th>
        </tr>
    </thead>
    <tbody>
                    <tr>
            <td>
                test1                </td>
            <td>
                Event3                </td>
            <td>
                2015-01-08 19:41:45                </td>
            <td>
                0                </td>
            <td>
                <a class="event_group1" href="http://localhost/IOCLALL/IOCLbackend/../IOCLfrontend/images/events/WWW.YTS_.RE_.jpg">
                    <img alt="No Image" class="img-responsive" style="max-width:145;max-height: 208px" src="http://localhost/IOCLALL/IOCLbackend/../IOCLfrontend/images/events/WWW.YTS_.RE_.jpg" />
                </a>
            </td>
            <td>
                <a href="http://localhost/IOCLALL/IOCLbackend/index.php/start/deleteevent?id=2" onclick="return del();"><span class="fa fa-fw fa-trash" ></span></a>&nbsp;&nbsp;
                <a href="http://localhost/IOCLALL/IOCLbackend/index.php/start/editevent?id=2" onclick=""><span class="fa fa-fw fa-edit" ></span></a>
            </td>
        </tr>



    </tbody>
</table>

</div>

Answer 1

您必须像对待 P 一样对待 TD， 添加一个 text-align:center 到 TD 和一个 display:inline-block 到图像

<td style="text-align: center;">
    <img style="display: inline-block;" />
</td>