如何将图像放入表格的中间表格单元格中答案

【问题标题】：how to fit image inside middle Table cell of table如何将图像放入表格的中间表格单元格中
【发布时间】：2020-05-27 21:30:19
【问题描述】：

我试图在我的 bootstrap4 表格单元格的中心显示一个图像，但它显示在单元格的左侧，甚至与边框重叠。我尝试将内联样式添加到表格单元格 html 标记中，即 text-align: center;垂直对齐：中间；以及图像的css，但无济于事。我试着用 span 换行，结果还是一样。此外，我的 (.row.NotCompleted) 图像根本没有显示，但路径是正确的，因为它与显示 (.row.Completed) 的图像位于同一文件夹中

HTML

<div class="table-responsive container-fluid">
    <table class="table table-bordered table-hover">
        <thead>
            <tr class="">
                <th scope="col" colspan="4">Please review your biographical information and update any missing information:</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width:50px; text-align:center; vertical-align:middle; white-space:nowrap;">
                   <span><img class="row @PreferredNameRowStatus" /></span>
                </td>
                <td>Preferred Name:</td>
                <td class="itemValue">@Model.PreferredName</td>
                <td>
                    <a id="PreferredNameLnk" href="#">Click Here to Update</a><br />
                </td>
            </tr>
            <tr>
</table>
</div>

CSS

.row.Completed {
        background-image: url("/images/Completed.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: block;
    }

    .row.NotCompleted {
        content: url('/images/Notcomplete.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        /* display set to block element */
        display: block;
        /*width: 100%;  */
        height: 100%;
    }

td img {
    max-width: 100%;
    height: auto;
}

截图：

【问题讨论】：

这对您有帮助吗developer.mozilla.org/en-US/docs/Web/CSS/background-position？如果不是，您可以将图像加载到子 div 或直接通过 img 标签然后居中该 div 或 img (css-tricks.com/centering-css-complete-guide)
Background-position 有所帮助，但我发现罪魁祸首是 display:flex;从引导程序中提取的样式。我添加了 display:inline;与背景位置一起到 css:Center;它解决了我的问题！
我通过使用 razor 将图像 src 动态链接到图像文件来解决这个问题。（即）这很好用

标签： html css bootstrap-4

【解决方案1】：

.row.Completed {
        background-image: url("/images/Completed.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: block;
    }

    .row.NotCompleted {
        content: url('/images/Notcomplete.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        /* display set to block element */
        display: block;
        /*width: 100%;  */
        height: 100%;
    }

td img {
    max-width: 100%;
    height: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="table-responsive container-fluid">
    <table class="table table-bordered table-hover">
        <thead>
            <tr class="">
                <th scope="col" colspan="4">Please review your biographical information and update any missing information:</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="width:50px; text-align: -moz-center;
vertical-align: middle;
text-align: -webkit-center;">
                   <span><img src='https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png' class="row @PreferredNameRowStatus" /></span>
                </td>
                <td>Preferred Name:</td>
                <td class="itemValue">@Model.PreferredName</td>
                <td>
                    <a id="PreferredNameLnk" href="#">Click Here to Update</a><br />
                </td>
            </tr>
            <tr>
</table>
</div>

【讨论】：