javascript - 定位元素没有宽度如何居中显示

问题描述

问 题

元素没有宽高，而且使用的定位；

解决方案

一个可行的思路是，那个红色的标签由于是不固定宽度的，因此它自身不要绝对定位，而是给它外面再增加一层，这增加的一层div进行绝对定位。绝对定位的元素只用作容器，设置为能容纳最大的标签宽度。

题主可以参考一下这段代码：

<div class="total-container">
  <div class="item">
    <div class="image-placeholder"></div>
    <div class="label-container">
      <span class="label">奖率10%</span>
    </div>
  </div>
  <div class="item">
    <div class="image-placeholder"></div>
    <div class="label-container">
      <span class="label">奖率</span>
    </div>
  </div>
  <div class="item">
    <div class="image-placeholder"></div>
    <div class="label-container">
      <span class="label">返奖率10%</span>
    </div>
  </div>
</div>

.total-container{
  width: 400px;
  min-height: 100px;
  margin: 20px auto;
  padding: 20px;
  border: 1px dotted #369;
  overflow: hidden;
}
.item{
  position: relative;
  margin-right: 20px;
  float: left;
}
.image-placeholder{
  width: 70px;
  height: 70px;
  background: #9fa8da;
  border-radius: 50%;
}
.label-container{
  position: absolute;
  width: 200%;
  left: -50%;
  top: 50px;
  text-align: center;
}
.label{
  display: inline-block;
  height: 24px;
  padding: 0 20px;
  border-radius: 15px;
  background: #d32f2f;
  color: #fff;
  font-size: 12px;
  line-height: 24px;
}

效果是：

这篇关于javascript - 定位元素没有宽度如何居中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！