【问题标题】:Position absolute after center under divdiv下中心后的绝对位置
【发布时间】:2018-09-27 03:43:39
【问题描述】:

我对绝对位置后有问题。我无法在 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>

【问题讨论】:

  • 你到底想做什么??不清楚。

标签: html css css-position center absolute


【解决方案1】:

我相信你想把 :after 伪元素居中。将 position:absolute 分配给元素后,您无法以 text-align:center 居中该元素。您必须使用左、右位置和负边距。试试这个代码。

.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;
}

【讨论】:

  • 是的,这是我的解决方案。谢谢你的帮助:)!
  • 乐于助人,继续编码 :)
【解决方案2】:

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

.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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-07-15
    • 1970-01-01
    • 2018-09-09
    • 1970-01-01
    • 2016-04-02
    • 2013-12-25
    • 2013-05-27
    • 2012-04-18
    相关资源
    最近更新 更多