Question

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

这就是我想要实现的目标

任务，简化：

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

我的想法：

为中心的数字
放置一个块元素以包含数字，该数字也会根据需要自动居中

在.ioitem。{/ li>中对其他元素进行绝对定位

我使用了以下代码

<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表格布局，因为表格单元格具有vertical-align功能。注意，我稍微重新排序了HTML标签，将数字放在中间。

＆＃13;

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

＆＃13;

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

＆＃13;

<强> jsFiddle

将绝对位置与居中文本组合在一起

3 个答案: