Question

我想知道是否有人有任何技术来定位css生成的内容。例如：

.block {
  height: 150px;
  width: 150px;
  border: 1px solid black;
}
.block:after {
  content: "content";
}

<div class="block"></div>

我希望将内容集中在框的直接中心，而我的常用技巧都不起作用。有任何想法吗？谢谢！

Answer 1

由于伪元素基本上是作为子元素添加的，因此一个选项是使用flexbox layout。将display: flex添加到父元素，然后使用align-items: center进行垂直居中，justify-content: center进行水平居中。

.block {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.block:after {
  content: "content";
}

<div class="block"></div>

或者，您也可以将元素 relative 绝对定位到父级，并使用transform trick进行垂直/水平居中。

.block {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  position: relative;
}
.block:after {
  content: "content";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<div class="block"></div>

Answer 2

您可以像使用任何其他元素一样使用position。确保您的psuedo内容包含display:block;，已定义的width和height。从那里你可以给它position:relative;以及你需要的任何其他值。

http://codepen.io/RobErskine/pen/vLYZLd

Answer 3

如果您只想在该块中包含文本，并且容器将是静态大小，您可以执行类似的操作。对于更复杂的方案，我还建议使用本文https://css-tricks.com/centering-css-complete-guide/。

＆＃13;

.block {
    height: 150px;
    width: 150px;
    border: 1px solid black;
}

.block:after {
    content: "content";
    display:block;
    width:100%;
    text-align:center;
    line-height:150px;
}

＆＃13;

<div class="block"></div>

＆＃13;

垂直/水平居中伪元素生成的内容

3 个答案: