Question

我需要将一些文本居中对齐，但将其向左推，以便使其居中对齐。

<th style="text-align:Center"> TextHere</th>

Answer 1

您将需要一个内部元素，该元素是标题单元格宽度的一半且居中。该元素的内容将左对齐。

table {
    width: 100%;
}

th:nth-child(2) {
    text-align: center;
    background: pink;
}

th span {
    display: inline-block;
    width: 50%;
    text-align: left;
    background: lightblue;
}

<table>
    <tr>
        <th></th>
        <th><span>Text Here</span></th>
        <th></th>
    </tr>
</table>

您要求内联CSS。我将它留给您以迁移到此类。不过，嵌入样式标签可能会更好。

Answer 2

您可以将span的宽度设置为50%，将其向左拉并居中放置文本

table {
    width: 100%;
}

th{
    text-align: center;
    background: green;
    width:50%
}

th span {
    display: inline-block;
    width: 50%;
    float:left;
    text-align: center;
    background: red;
}

<table>
    <tr>
        <th></th>
        <th><span>Text Here</span></th>
    </tr>
</table>

尽管请记住，inline-block标签的span由于浮动而被忽略。如果float的值不是none，则该框处于浮动状态，并且display被视为block。

如何在居中和左对齐之间放置文本？

2 个答案: