Question

我试图用css创建一个带有白色减号的绿色框。我试图让负号在绿框内垂直和水平居中。

我可以通过明确指定伪减号的顶部和左侧位置来轻松完成此操作。但是，我想知道是否还有另一种非显式方法可以做到这一点。我正在尝试text-align和vertical-align。它不起作用。任何人都可以帮忙吗？

＆＃13;

*, *:before, *:after {
    box-sizing: border-box;
}

.container{
  background-color:green;
  display:inline-block;
  height:4em;
  width:4em;
  position:relative;
  text-align:center;
}

.container:before {
  content:"";
  background-color:white;
  display:inline-block;
  height: 0.5em;
  width:2em;
  position:absolute;
  vertical-align:middle;
  
}

＆＃13;

<span class="container">

</span>

＆＃13;

Answer 1

*, *:before, *:after {
    box-sizing: border-box;
}

.container{
  background-color:green;
  display:inline-block;
  height:4em;
  width:4em;
  position:relative;
  text-align:center;
}

.container:before {
  content:"";
  background-color:white;
  height: 0.5em;
  width:2em;
  position:absolute;
  left: 50%;
  top: 50%;
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}

<span class="container">

</span>

如果您只是为现代浏览器执行此操作，则可以将其添加到.container::before {}样式中：

  left: 50%;
  top: 50%;
  -webkit-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  -ms-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);

Answer 2

给出左边和上边的值。因为position: absolute;有.container::before。

当时不需要display:inline-block;和vertical-align:middle;。

*, *:before, *:after {
    box-sizing: border-box;
}

.container{
  background-color:green;
  display:inline-block;
  height:4em;
  width:4em;
  position:relative;
  text-align:center;
}


.container::before {
    background-color: white;
    content: "";
    height: 0.5em;
    left: 50%;
    line-height: 0.5em;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2em;
}

<span class="container">

</span>

修改

使用display:flex而不使用left和top值的另一种方法。所有最新浏览器都支持哪些。

*, *:before, *:after { box-sizing: border-box; } .container { background-color: green; display: flex; justify-content: center; align-items: center; width: 4em; height: 4em; } .container::before { background-color: white; content: ""; height: 0.5em; width: 2em; }

<span class="container"> </span>

Answer 3

你走在正确的轨道上，只需要进行2次轻微调整。由于你使用了'em'，这段代码也应该很好地扩展。

$arr = [4,2,1,3];

usort($arr, function ($a, $b) {
    return $a <=> $b;
});

我所做的是将它从顶部推出1.75em。因为你的积木是4em高，而负是0.5em的高，所以确切的中间是4em / 2 - 0.5em / 2 = 2 - 0.25 = 1.75。左侧设置适用相同的数学：4em / 2 - 2em / 2 = 2 - 1 = 1em。

如何居中伪元素

3 个答案: