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

Question

我在 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 的文本自动居中。

Answer 1

你能试试这个代码吗？ 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>

Answer 2

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

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

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

Answer 3

试试这个 CSS table 布局，因为 table 单元格具有 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

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

Combining absolute positions with centered text

html

css

position

element

center