Question

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

<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

<td style="text-align: center;">

将css添加到该td以对齐中心的文本，它也应该适用于图像

Answer 2

将align =“center”添加到单元格。

例如

<td align="center"> <img src="...

Answer 3

如何添加 display：inline / inline-block; 保证金：0px auto;

我希望它会回答你的问题

Answer 4

您必须像处理 P 一样对待道明，将 text-align：center 添加到 TD ，并将 display：inline-block 添加到图像

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

图像未定位于中心

4 个答案: