Question

列表元素不在 Internet Explorer 中的居中位置。但是在 Chrome 中，元素居中。随附的是示例代码。我对所有类都使用 Bootstrap CSS Framework 。

这是JSfiddle https://jsfiddle.net/8cunpsvy/

the result in IE

the result in Chrome

HTML：

<div class="card-body">
    <table class="table-sm table-hover">
        <thead>
            <tr class="text-center">
                <th class="w-25" scope="col"></th>
                <th style="width: 54%" scope="col"></th>
                <th style="width: 10%" scope="col">Actual</th>
                <th style="width: 1%;" scope="col">Status</th>
                <th style="width: 10%" scope="col">Expected</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td class="text-center">2/13/2019</td>
                <td class="text-center">
                    <ul class="status-circle"><li></li></ul>
                </td>
                <td class="text-center"></td>
            </tr>
        </tbody>
    </table>
</div>

CSS：

.status-circle {
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    border-spacing: 0px;
    line-height: 0;
}

.status-circle li {
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #000;
    width: 15px;
    height: 15px;
    background: #737373;
}

Answer 1

我将内部的元素更改为div，并从li元素转移了所有样式，还添加了内容。

HTML：

<div class="card-body">
    <table class="table-sm table-hover">
        <thead>
            <tr class="text-center">
                <th class="w-25" scope="col"></th>
                <th style="width: 54%" scope="col"></th>
                <th style="width: 10%" scope="col">Actual</th>
                <th style="width: 1%;" scope="col">Status</th>
                <th style="width: 10%" scope="col">Expected</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td class="text-center">2/13/2019</td>
                <td class="text-center">
                    <div class="div-status-circle"></div>
                </td>
                <td class="text-center"></td>
            </tr>
        </tbody>
    </table>
</div>

CSS：

.div-status-circle {
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #000;
    width: 15px;
    height: 15px;
    content: "";
    background: #737373;
}

Answer 2

尝试这个小提琴

Fiddle

.status-circle {
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
background: #737373;
display: block;
margin: auto;
}

您可以通过使用div或span来实现此目的，而不是对单个项目使用list元素

表格元素在Internet Explorer中无法很好地对齐

2 个答案: