Question

我正在尝试在框中水平居中对齐数字，但数字右对齐，如下图所示：

如果你认为我应该尝试不同的方法，请建议我。

* {
    margin:0;
    padding:0;
}

.table{
    width: 70px;
    border-collapse: collapse;
    border-width: 0;
}
th,td {
    padding: 2px 5px 2px 5px;
    text-align: center;
}

span {
    display: inline-block;
    text-align: right;
}

<html>
<head>
    <link rel="stylesheet" href="check.css">
</head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th>Numbers</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><span>8</span></td>
                </tr>
                <tr>
                    <td><span>9</span></td>
                </tr>
                <tr>
                    <td><span>10</span></td>
                </tr>
                <tr>
                    <td><span>11</span></td>
                </tr>
                <tr>
                    <td><span>12</span></td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

数字将是动态的（在一到四个字符之间）

Answer 1

我添加了边框，因此您可以看到我是如何做到的。

将td内容与中心对齐。

将td > span内容对齐，将其宽度调整为小。

＆＃13;

* {
    margin:0;
    padding:0;
}

.table{
    width: 70px;
    border-collapse: collapse;
    border-width: 0;
}
td {text-align: center; border: 1px solid red;}
td span {
    padding: 0;
    text-align: right;
    border: 1px solid blue;
    width: 31px;
}

span {
    display: inline-block;
    text-align: right;
}

＆＃13;

<html>
<head>
    <link rel="stylesheet" href="check.css">
</head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th>Numbers</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><span>8</span></td>
                </tr>
                <tr>
                    <td><span>9</span></td>
                </tr>
                <tr>
                    <td><span>10</span></td>
                </tr>
                <tr>
                    <td><span>1122</span></td>
                </tr>
                <tr>
                    <td><span>112</span></td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

＆＃13;

Answer 2

除了上面的解决方案之外，我不得不说，对于这种情况，使用等宽字体可能是一个好主意。

Answer 3

另一个不需要设置显式大小的选项（因此可以使用任何字体和/或数字）：

＆＃13;

* {
    margin:0;
    padding:0;
}

.table{
    width: 70px;
    border-collapse: collapse;
    border-width: 0;
}
tbody tr:nth-child(odd) { background: #eee; }
th,td {
    padding: 2px 5px 2px 5px;
    text-align: right;
}
tbody tr::before, tbody tr::after {
    content: '';
    display: table-cell;
    width: 50%;
}

＆＃13;

<html>
<head>
    <link rel="stylesheet" href="check.css">
</head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th colspan="3">Numbers</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                </tr>
                <tr>
                    <td>10</td>
                </tr>
                <tr>
                    <td>11</td>
                </tr>
                <tr>
                    <td>12</td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

＆＃13;

诀窍在于添加两个＆＃34;伪单元＆＃34;每行占可用宽度的一半。

Answer 4

我遇到了同样的问题并遇到了以下建议，我发现这些建议不是最佳的

在列的两侧使用额外的填充（响应性如何？）
使用额外的列（任何人的语义？）
在td中放一张桌子（表现任何人？）

经过每个角落，我相信我有这个问题的最佳解决方案 Flexbox救援!!!

简单的技巧：只需在作为flexbox容器的td中添加一个span，并且有两个span子项，其中包含两个内容部分。你的专栏可以是任何尺寸，这仍然像一个魅力！

<style>
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: sans-serif;
}
html, body{
    width: 100vw;
    min-height: 100vh;
}
body{
    display: flex;
    flex-direction: column;
}
#content{
    flex: 1;
    display: flex;
    flex-direction: row;
}
#left, #right{
    flex: 2;
}
#center{
    flex: 6;
}
table{
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
}


table th,
table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #e9ecef;
}

table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #e9ecef;
}

td{
    text-align: center;
}
span.left{
    flex: 1;
    background: lightcoral;
    text-align: right;
}

span.right{
    flex: 1;
    background: lightblue;
    text-align: left;
}

.flexwrap{
    display: flex;
    flex-direction: row;
}
</style>
<body>
    <div id= "content">
        <div id = "left"></div>
        <div id = "center">
            <table>
                <thead>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                    <th>Column 5</th>
                    <th>Column 6</th>
                    <th>Column 7</th>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>Item 1</td>
                        <td>
                            <span class="flexwrap">
                                <span class = 'left'>
                                    13737
                                </span>
                                <span class = 'right'>
                                    .9
                                </span>
                            </span>
                        </td>

                        <td>Table Cell</td>
                        <td>Table Cell</td>
                        <td>Table Cell</td>
                        <td>Table Cell</td>
                    </tr>

                    <tr>
                        <td>
                            1
                        </td>
                        <td>Item 2</td>
                        <td>
                            <span class="flexwrap">
                                <span class = 'left'>
                                    2
                                </span>
                                <span class = 'right'>
                                    .34000004
                                </span>
                            </span>
                        </td>

                        <td>Table Cell</td>
                        <td>Table Cell</td>
                        <td>Table Cell</td>
                        <td>Table Cell</td>
                    </tr>
                </tbody>
            </table>        
        </div>
        <div id = "right"></div>
    </div>
</body>

我为跨度着色，以便您可以在输出中看到它们。希望有所帮助

水平对齐中间右对齐

4 个答案: