将文本中心放在其上方的边框空间中

Question

在下面的代码中，如何将文本中心放置在正上方的边框空间中，如下面的屏幕截图所示＆＃34; Some Text 1＆＃34;和＃34;一些文字2＆＃34;在他们上方的边界空间的中心。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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()

进行定位

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用表格布局简单回答，使其与您的行为保持一致：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

尝试使用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>