将绝对位置与居中文本相结合答案

【问题标题】：Combining absolute positions with centered text将绝对位置与居中文本相结合
【发布时间】：2016-11-04 03:48:40
【问题描述】：

我在 div 中放置 3 个单独的文本元素时遇到问题。

这就是我想要实现的目标

任务，简化：

无论多宽，中心的数字都必须居中。（自动居中）
下面的数字必须在左边
下面的字母必须在右边

我的想法：

为中心的数字创建一个育儿容器
放置一个块元素来包含数字，它也会根据需要自动居中
对.ioitem内的其他元素进行绝对定位。

我使用了以下代码

<div class="ioitem ioitem1">
    <div class="numberContainer">
        <div class="number">1</div>
        <div class="width">3</div>
        <div class="base">D</div>
    </div>
</div>

样式

.ioitem {
    display: inline-block;
    background-color: white;
    height: 30px;

    margin: 0px 10px 10px 0px;
    padding: 0px 0px 0px 0px;

    position: relative;
}
.ioitem1 {  width: 30px; }
.ioitem > .numberContainer {
    font-size: 12px;
    font-weight: bold;

    position: absolute;
    top: 0;
    left: 0;
}
.ioitem > .number {
    display: block;
    margin: auto;
    text-align: center;
}

我得到的是这个烂摊子：

居中的数字没有居中，几乎所有东西都没有按照我的意愿放置。为了简洁起见，我省略了一些 CSS。

请问，我怎样才能得到想要的结果？一个步骤列表就足够了。

让我头疼的事情是让.number 的文本自动居中。

【问题讨论】：

标签： html css position center element

【解决方案1】：

试试这个 CSS 表格布局，因为表格单元格具有 vertical-align 功能。注意，我对 HTML 标签稍微重新排序，将数字放在中间。

body {
  background: silver;
}
.numberContainer {
  background: white;
  display: table;
  table-layout: fixed;
  height: 90px;
  width: 90px;
  font-size: 30px;
  font-weight: bold;
}
.width, .number, .base {
  display: table-cell;
  text-align: center;
}
.width, .base {
  vertical-align: bottom;
}
.number {
  vertical-align: middle;
  font-size: 60px;
  color: orange;
}

<div class="ioitem ioitem1">
  <div class="numberContainer">
    <div class="width">3</div>
    <div class="number">1</div>
    <div class="base">D</div>
  </div>
</div>

jsFiddle

【讨论】：

我不会假装我理解它的工作原理，但这似乎是最优雅的解决方案。如果用两句话来形容你做了什么，你会说什么？现在可以将每个子 div 视为具有不同垂直对齐方式的表格单元格吗？
我在这个演示中添加了一些描述 - jsfiddle.net/4tha983c/1 应该解释它。

【解决方案2】：

你能试试这个代码吗？ http://codepen.io/nehemc/pen/LkyJYN

<style>
.ioitem { display: inline-block; background: #C03; height: 200px; margin: 0px 10px 10px 0px; padding: 0px 0px 0px 0px; position: relative; width:200px; color:#fff; }
.number { position:absolute; left:0; right:0; top:0; bottom:0; height:10px; margin:auto; text-align:center; }
.width { position:absolute; left:20px; bottom:20px; height:10px; margin:auto; text-align:center; background:#fff; padding:10px; color:#000; }
.base { position:absolute; right:20px; bottom:20px; height:10px; margin:auto; text-align:center; background:#fff; padding:10px; color:#000; }
</style>

<div class="ioitem ioitem1">
    <div class="number">1</div>
    <div class="width">1</div>
    <div class="base">1</div>
</div>

【讨论】：

【解决方案3】：

这里有几种方法可以使用 - 第一种方法根本不需要您更改 HTML，而是将您想要在顶部的数字设置为 position: absolute，然后将其转换为您想要的位置想要它去。

  <style>
    .numberContainer {
        position: relative;
        display: inline-block;
    }
    .numberContainer div{
      width: 30px;
      display: inline-block;
    }
    .numberContainer .number{
      position: absolute;
      left: 50%;
      transform: translate(calc(-50% - 0.1em), -50%);
    }
  </style>
  <div class="ioitem ioitem1">
      <div class="numberContainer">
          <div class="number">1</div>
          <div class="width">3</div>
          <div class="base">D</div>
      </div>
  </div>

或者，如果您不想在内容上使用 position: absolute，您可以翻转 HTML 的顺序以匹配您的图表并这样做。

  <style>
    .numberContainer {
        position: relative;
        display: inline-block;
    }
    .numberContainer div{
      width: 30px;
      display: inline-block;
    }
    .numberContainer .number{
      transform: translate(calc(-50% - 0.1em), -50%);
    }
  </style>
  <div class="ioitem ioitem1">
      <div class="numberContainer">
          <div class="width">3</div>
          <div class="number">1</div>
          <div class="base">D</div>
      </div>
  </div>

希望其中之一能满足您的需求！

【讨论】：