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

Question

在下面的代码中，如何将文本中心放置到边框 space 正上方，如下面的屏幕截图所示 "Some Text 1" 和 "Some Text 2" 位于边框的中心 space在他们之上。

.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; 并使用 transform: translate(50%, 0); 将它们自身宽度的 50% 推出单元格来实现。

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

.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

您可以使用 pseudo-elements 添加文本并将其放置在 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

使用 table 布局使其与您的操作保持一致的简单答案：

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

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

placing text center to border space above it

html

css

css-position

css-tables