размещение текстового центра в пограничном пространстве над ним

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>