在div之后的中心位置绝对

Question

我的位置绝对有问题。 div之后我无法将内容集中在一起。我的代码：enter link description here

我检查了其他帖子，但不幸的是他们没有帮助我。

.nav {
  height: 20px;
}
.w {
  border: 1px solid red;
  color: red;
  display: inline-block;
  padding: 15px;
  height: 20px;
}
.e:after {
  content: "W";
  display: block;
  position: absolute;
  line-height: 0;
  margin: 0 auto;
  bottom: 350px;
  border: 1px solid blue;
  height: 20px;
  width: 20px;
  text-align: center;
}

<nav class="nav">
  <ul class="q">
    <li class="w">
      <a href="" class="e">Testttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Testtttttttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Testttttttttttttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Test</a>
    </li>
  </ul>
</nav>

Answer 1

我相信你正在努力将中心：在伪元素之后。在为text-align:center分配position:absolute后，您无法将元素置于中心位置。你必须使用左，右位置和负边距。试试这段代码。

.e{
  position: relative;
}
.e:after {
  content: "W";
  display: block;
  position: absolute;
  line-height: 0;
  bottom: -50px;
  border: 1px solid blue;
  height: 20px;
  width: 20px;
  left: 50%;
  margin-left: -10px;
}

Answer 2

只需将text-align: center;添加到css中的nav类

即可

.nav {
  height: 20px;
  text-align: center;
}

.w {
  border: 1px solid red;
  color: red;
  display: inline-block;
  padding: 15px;
  height: 20px;
}

.e:after {
  content: "W";
  display: block;
  position: absolute;
  line-height: 0;
  margin: 0 auto;
  bottom: 350px;
  border: 1px solid blue;
  height: 20px;
  width: 20px;
  text-align: center;
}

<nav class="nav">
  <ul class="q">
    <li class="w">
      <a href="" class="e">Testttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Testtttttttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Testttttttttttttttt</a>
    </li>

    <li class="w">
      <a href="" class="e">Test</a>
    </li>
  </ul>
</nav>