居中一个伪元素 [英] Center a Pseudo Element

问题描述

第一次真正使用伪<：code>：之后的选择器。

First time really using the pseudo :after selector. Not sure if the problem I'm running into is a limitation of it or I'm just missing something obvious.

我的直播代码 。

Here's my live code.

li.current:after {
    border-width: 1px 1px 0 0;
    content: ' ';
    background: #256f9e;
    display: block;
    height: 13px;
    position: absolute;
    width: 10px;
    top: 6;
    margin:0px auto;
    z-index: 99;
    transform: rotate(-224deg);
    -webkit-transform: rotate(-224deg);
    -moz-transform: rotate(-224deg);
    -ms-transform: rotate(-224deg);
    -o-transform: rotate(-224deg);
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    text-align: center;
    float: center;
}

我已经创建了一个小三角形看起来像一个三角形）。我希望它集中在< li>< / li> ，但不能用我的正常方法。
失败的事情（无特定顺序）：

I've created a little triangle (Or rather a box that has been rotated to look like a triangle). I want it centered within the <li></li> but can't figure it out using my normal methods. The things that have failed (in no particular order):

text-align: center;
float: center;
margin: 0 auto;
margin-right: 0;
margin-left: 0;

我缺少什么？我怀疑这很重要，但我使用AngularJS。想想我会提到它，以防万一有一个已知的冲突Angular&伪选择器（我怀疑）。
感谢。

What am I missing? I doubt it matters, but I'm using AngularJS. Thought I'd mention it in case there is a known conflict between Angular & Pseudo selectors (which I doubt). Thanks.

推荐答案

问题是你使用 absolute 定位&你正在使用的方法来尝试和中心它。如果你绝对定位一个元素，ol' margin：0 auto; 方法将不能工作来使中心的东西。我指向你解释为什么这是在问题的结尾，但是如果你只是想让这个工作让我们先得到解决方案。

The issue is your use of absolute positioning & the method you're using to try and center it. If you position an element absolutely, the ol' margin: 0 auto; method won't work to center the thing. I point you to an explanation as to why this is at the end of the question, but in case you just want this to work let's get to the solution first.

这里一些工作代码。 在JSFiddle上查看

Here's some working code. View it on JSFiddle

#tool-menu li {
  ...
  position: relative;
}

li.current:after {
  ...
  position: absolute;
  width: 10px;
  top: 6;
  left: 50%;
  margin-left: -5px;
}

让我们来分析这里发生了什么。

Let's break down what's going on here.

在您的原始Fiddle中，伪元素绝对相对于视口定位。一个例子可能是最好的方式来显示这意味着什么，为什么我们不想要这个。请考虑将其设置为 top：0 。这将保持它锁定到浏览器窗口的顶部（或在这种情况下，JSFiddle框架），而不是父（ li ）。所以，如果我们的菜单恰好在页面的底部，或者甚至移动，伪元素将独立于它，浮在页面的顶部。

In your original Fiddle, the pseudoelement is positioned absolutely relative to the viewport. An example might be the best way to show what this means, and why we don't want this. Consider setting it to top: 0. This would keep it latched to the top of the browser window (or, in this case, the JSFiddle frame), rather than the parent (the li). So, if our menu happened to be at the bottom of the page, or even moving around, the pseudoelement would be floating independent from it, stuck to the top of the page.

当你没有在任何父元素上显式设置位置时，这是绝对定位元素的默认行为。我们想要的是相对于父对象定义它的位置。如果我们这样做，那么伪元素会与父代，无论它发生在什么地方。

This is the default behavior of an absolutely positioned element when you don't explicitly set the position on any parent elements. What we want is to have its position defined relative to the parent. If we do this then the pseudoelement sticks with the parent, no matter where it happens to be.

为了做到这一点，你需要设置父代，＃tool-menu li ，以显式定位（这意味着将其设置为除 position：static 之外的任何东西）。如果你选择使用 position：relative; ，它不会改变页面上父节点的计算位置，而是做我们想要的。所以这就是为什么我使用那个。

To make this happen, you need to set the parent, #tool-menu li, to be explicitly positioned (which means setting it to be anything other than position: static). If you choose to use position: relative;, it won't change the computed location of the parent on the page, and does the thing we want. So that's why I used that one.

在技术术语中，我们在这里做的是创建一个新的

In technical terms, what we're doing here is creating a new containing block for the child.

现在我们的绝对定位将取决于父对象，我们可以利用这样的事实，我们可以使用百分比来定义放置孩子的位置。在这种情况下，你想要它居中，所以我设置为左：50％。

Now that our absolute positioning will be determined in relation to the parent, we can take advantage of the fact that we can use percentages to define where to place the child. In this case, you want it centered, so I set it be left: 50%.

只是这个，虽然，你会看到，这是排列在左边缘的伪元素在50％。这不是我们想要的–我们希望伪元素的中心在中间。这就是为什么我添加了负值 margin-left 。

If you do just this, though, you'll see that this lines up the left edge of the pseudoelement at 50%. This isn't what we want – we want the center of the pseudoelement to be at the middle. And that's why I added the negative margin-left. This scoots it over a bit to line the middle up with the center of the parent.

一旦我们这样做，它就是中心了！ Brilliance！

And once we do that, it's centered! Brilliance!

边际的自动值是从相当复杂的算法计算的。有时，它计算为0.我从经验知道，这是发生的一个这样的实例，虽然我还没有跟踪我的方法通过算法，看看究竟为什么。如果您想执行此操作，请查看大多数浏览器最可能实现的规范。

The auto value of a margin is calculated from a fairly complex algorithm. At times, it computes to 0. I know from experience that this is one such instance of that happening, though I haven't yet traced my way through the algorithm to see exactly why. If you'd like to run through it, take a look at the spec most browsers have most likely implemented.

这篇关于居中一个伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！