代码之家 › 专栏 › 技术社区 › SNYDERHAUS

不影响居中HTML元素的伪元素

centering flexbox css html

SNYDERHAUS · 技术社区 · 9 年前

但是,我希望数值与中心对齐,而“%”浮在旁边,并且不影响放置。

请参阅代码笔: https://codepen.io/brycesnyder/pen/MEwddv

div {
  font-family: sans-serif;
  height: 200px;
  width: 200px;
  background: #ae63e4;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  line-height: 1;
  color: white;
  text-align: center;
}

div.percent:after {
  content: '%';
  font-size: 30px;
  margin-bottom: 15px;
}

div.a-percent {
  position: relative;
  background: #0ebeff;
}

div.a-percent:after {
  content: '%';
  position: absolute;
  font-size: 30px;
  margin-top: 5px;
}

<div class="percent">0</div>
<div class="percent">10</div>
<div class="percent">100</div>

<br>
<br>

<div class="a-percent">0</div>
<div class="a-percent">10</div>
<div class="a-percent">100</div>

3 回复 | 直到 9 年前

Michael Benjamin William Falcon 9 年前

为什么不在数字的左侧添加相同的百分比符号?

然后用隐藏此副本 visibility: hidden

这在容器中创建了相等的平衡,数字可以完全居中。

div {
  font-family: sans-serif;
  height: 200px;
  width: 200px;
  background: #ae63e4;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  line-height: 1;
  color: white;
  text-align: center;
}
div::after {
  content: '%';
  font-size: 30px;
  margin-bottom: 15px;
}
div::before {
  content: '%';
  font-size: 30px;
  margin-bottom: 15px;
  visibility: hidden;
}
div.a-percent {
  background: #0ebeff;
}

<div class="percent">0</div>
<div class="percent">10</div>
<div class="percent">100</div>

<br>
<br>

<div class="a-percent">0</div>
<div class="a-percent">10</div>
<div class="a-percent">100</div>

更多详细信息和其他选项: Center and right align flexbox elements

SNYDERHAUS 9 年前

div {
  height: 200px; width: 200px;
  background: maroon;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  &.percent {
    &:after {
      content: '%';
      position: absolute;
  }
}

Zina Taklit 9 年前

试试这个:

div {
    font-family: sans-serif;
    height: 200px; width: 200px;
    background: #ae63e4;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    line-height: 1;
    color: white;
    text-align: center;
    &.percent {
        &:after {
            content: '%';
            font-size: 30px;
        }
    }
}

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

2 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

2 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

2 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

2 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

2 年前

coder · 边界半径不适用于容器元素

2 年前

user9026 · 项目登录页面(freecodecamp)定价设计

2 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

2 年前