css 垂直对齐不工作时，文本模式是垂直-rl在火狐

2vuwiymt 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(112)

我想在此表中对齐中心垂直文本，但它不工作的Firefox。（它的工作在Chrome的罚款）。
你有什么想法，使它在Firefox中心？

table{width: 100%;}
table td{border:solid 1px #333}
.ver td{
writing-mode: vertical-rl;
vertical-align: middle;
padding:5px;
}

<table>
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr> 
<tr class="ver"><td>this is a test</td><td>this is a test</td><td>this is a test</td></tr> 
<tr><td>1</td><td>2</td><td>3</td></tr> 
<tr><td>1</td><td>2</td><td>3</td></tr>
</tbody> 
</table>

css

来源：https://stackoverflow.com/questions/76330695/vertical-align-not-work-when-text-mode-is-vertical-rl-on-firefox

1条答案

按热度按时间

jmp7cifd1#

您可以使用**line-height**：

table {
        width: 100%;
    }
    table td {
        border:solid 1px #333
    }
    .ver td {
        --width: 400px; /*width of the item*/
        width: var(--width);
        writing-mode: vertical-rl;
        text-align: center;
        line-height: var(--width);
        padding:5px;
    }

确保该值等于元素的高度，以使文本居中垂直对齐。
要进一步探索，请查看here。

赞(0）回复(0）举报 2023-05-30

我来回答

css 垂直对齐不工作时，文本模式是垂直-rl在火狐

1条答案

相关问题

热门标签

最新问答