结合绝对位置和居中文字

用户名

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

这是我想要实现的

White div是“ ioitem”

任务,简化了:

  1. 无论中间有多宽,中间的数字都必须居中。(自动居中)
  2. 下面的数字必须在左侧
  3. 下面的字母必须在右边

我的想法:

  1. 在中心为数字创建育儿容器
  2. 放置一个包含数字的图块元素,该数字也会根据需要自动居中
  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´文本自动居中。

贴纸

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档