将文本中心置于其上方的边框空间

Question

在下面的代码中，如何将文本中心置于其正上方的边框空间中，如下面的屏幕截图所示：“某些文本1”和“某些文本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%; 
 
}

<div class="Row"> 
 
    <div class="Column">C1</div> 
 
    <div class="Column">C2</div> 
 
    <div class="Column">C3</div> 
 
</div>

Answer 1

可以实现与放置文本元素在细胞中，将它们设置为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; 
 
}

<div class="Row"> 
 
    <div class="Column">C1<span>Some Text 1</span></div> 
 
    <div class="Column">C2<span>Some Text 2</span></div> 
 
    <div class="Column">C3</div> 
 
</div>

Answer 2

你可以使用伪元素添加文本，并将其位置position:absolute和transform: translate()

.Row { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    border-spacing: 10px; 
 
} 
 
.Column { 
 
    display: table-cell; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 
.Column:nth-child(1) { 
 
    width: 20%; 
 
} 
 
.Column:nth-child(2) { 
 
    width: 50%; 
 
} 
 
.Column:nth-child(3) { 
 
    width: 30%; 
 
} 
 
.Column:nth-child(1):after, 
 
.Column:nth-child(2):after { 
 
    content: 'Some text 1'; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    transform: translate(50%, 100%); 
 
    text-align: center; 
 
} 
 
.Column:nth-child(2):after { 
 
    content: 'Some text 2'; 
 
}

<div class="Row"> 
 
    <div class="Column">C1</div> 
 
    <div class="Column">C2</div> 
 
    <div class="Column">C3</div> 
 
</div>

Answer 3

尝试用新的标记与position: absolute;

.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: -45px; 
 
    top: 20px; 
 
}

<div class="Row"> 
 
    <div class="Column">C1<span>Some Text 1</span></div> 
 
    <div class="Column">C2<span>Some Text 2</span></div> 
 
    <div class="Column">C3</div> 
 
</div>

Answer 4

使用表格布局，使之与你做什么一致

答案很简单：

.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%; 
 
    } 
 

 
    .Row2 { 
 
     display: table; 
 
     width: 100%; 
 
     table-layout: fixed; 
 
     border-spacing: 10px; 
 
     
 
    } 
 

 
    .Column2 { 
 
     display: table-cell; 
 
     text-align:center; 
 
     width:40%; 
 
    } 
 

 
    .Column2:nth-child(2) { 
 
     width:60%; 
 
    }

<div class="Row"> 
 
     <div class="Column">C1</div> 
 
     <div class="Column">C2</div> 
 
     <div class="Column">C3</div> 
 
    </div> 
 
    <div class="Row2"> 
 
     <div class="Column2">Some Text 1</div> 
 
     <div class="Column2">Some Text 2</div> 
 
    </div>