Html 将文本中心放置到其上方的边框空间

在下面的代码中，如何将文本中心放置在其上方的边框空间，如下面的屏幕截图所示，“部分文本1”和“部分文本2”位于其上方边框空间的中心

.Row{
显示：表格；
宽度：100%；
表布局：固定；
边界间距：10px；
}
.栏目{
显示：表格单元格；
背景色：红色；
}
.列：第n个子项（1）{
宽度：20%；
}
.列：第n个子项（2）{
宽度：50%；
}
.列：第n个子项（3）{
宽度：30%；
}

C1
C2
C3

您可以通过将文本元素放置在单元格中，将它们设置为

位置：绝对transform:translate（50%，0），将其自身宽度的50%推出单元格

当然，您需要适当的供应商前缀来支持较旧的浏览器


.Row{
显示：表格；
宽度：100%；
表布局：固定；
边界间距：10px；
}
.栏目{
显示：表格单元格；
位置：相对位置；
背景色：红色；
}
.列：第n个子项（1）{
宽度：20%；
}
.列：第n个子项（2）{
宽度：50%；
}
.列：第n个子项（3）{
宽度：30%；
}
.Column>span{
位置：绝对位置；
右：0；
顶部：1.5em；
转换：转换（50%，0）；
文本对齐：居中；
}

c1一些文本1
C22一些文本2
C3
您可以使用伪元素添加文本，并使用
position:absolute
和
transform:translate（）


.Row{
显示：表格；
宽度：100%；
表布局：固定；
边界间距：10px；
}
.栏目{
显示：表格单元格；
背景色：红色；
位置：相对位置；
}
.列：第n个子项（1）{
宽度：20%；
}
.列：第n个子项（2）{
宽度：50%；
}
.列：第n个子项（3）{
宽度：30%；
}
.列：第n个子项（1）：之后，
.列：第n个子项（2）：之后{
内容：“一些文本1”；
位置：绝对位置；
右：0；
底部：0；
转换：翻译（50%，100%）；
文本对齐：居中；
}
.列：第n个子项（2）：之后{
内容：“部分文本2”；
}

C1
C2
C3
尝试使用位置为“绝对”的新标记


.Row{
显示：表格；
宽度：100%；
表布局：固定；
边界间距：10px；
}
.栏目{
显示：表格单元格；
位置：相对位置；
背景色：红色；
}
.列：第n个子项（1）{
宽度：20%；
}
.列：第n个子项（2）{
宽度：50%；
}
.列：第n个子项（3）{
宽度：30%；
}
.Column>span{
位置：绝对位置；
右：-45px；
顶部：20px；
}

c1一些文本1
C22一些文本2
C3
使用表格布局简单回答，使其与您的操作保持一致：


.Row{
显示：表格；
宽度：100%；
表布局：固定；
边界间距：10px；
}
.栏目{
显示：表格单元格；
背景色：红色；
}
.列：第n个子项（1）{
宽度：20%；
}
.列：第n个子项（2）{
宽度：50%；
}
.列：第n个子项（3）{
宽度：30%；
}
.Row2{
显示：表格；
宽度：100%；
表布局：固定；
边界间距：10px；
}
.专栏2{
显示：表格单元格；
文本对齐：居中；
宽度：40%；
}
.第2栏：第n个孩子（2）{
宽度：60%；
}

C1
C2
C3
一些文本1
一些文本2
尝试
列{text align:center；}
此解决方案不处理可变的文本长度。。。硬编码
right
属性不是一个好主意…我知道，但为了准确标记，我提供了此解决方案。仅供参考，CSS tranform浏览器供应商仅限IE10+：是的！你用的是什么浏览器？你是落选者吗？对我来说，这是意料之中的事。但是感谢您的提示，我将添加一个
text align:center
规则以避免此断行问题。但我认为这不是行动计划的问题不，但这可能是行动计划未来的问题！在答案中添加供应商前缀也可以帮助其他人查看答案。如果这就是你投我反对票的原因，那么请保留你的反对票。每个人都可以自己做供应商前缀，因为这会破坏代码，降低答案的清晰度。对不起。我没注意到你的回答。他们真的很相似。将删除我的。