將文本中心置於其上方的邊框空間

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>