作者:l夜幕下的流星雨l | 来源:互联网 | 2023-02-12 14:25
在下面的代码中,如何将文本中心放置在其正上方的边框空间中,如下面的屏幕截图所示,"Some Text 1"和"Some Text 2"位于它们上方的边框空间的中心.
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
background-color: red;
}
.Column:nth-child(1) {
width:20%;
}
.Column:nth-child(2) {
width:50%;
}
.Column:nth-child(3) {
width:30%;
}
1> andreas..:
你可以通过将文本元素放在单元格中来实现这一点,将它们设置为position: absolute;
并将它们自己宽度的50%推出单元格transform: translate(50%, 0);
.
当然,您需要适当的供应商前缀来支持旧浏览器.
.Row {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 10px;
}
.Column {
display: table-cell;
position: relative;
background-color: red;
}
.Column:nth-child(1) {
width:20%;
}
.Column:nth-child(2) {
width:50%;
}
.Column:nth-child(3) {
width:30%;
}
.Column > span {
position: absolute;
right: 0;
top: 1.5em;
transform: translate(50%, 0);
text-align: center;
}
C1Some Text 1
C2Some Text 2
C3