Question

当前，当我将鼠标悬停在导航菜单上时，我正在尝试居中使用CSS创建的箭头。即使我将margin left and right设置为auto。它似乎仍然不想居中。可能是因为我的HTML格式。我尝试了多种选择，但似乎都没有帮助。

请在下面查看我的HTML和CSS：

（不幸的是，我似乎无法重新创建我的代码，但我将其发布并在此期间继续尝试并重新创建它）

#navbar {
  overflow: hidden;
  background-color: $base-white;
  font-size: 11px;
  z-index: 2;
  border: 1px solid $base-grey;
  height: 50px;
}

.navbar-links {
  margin-left: 10em;
  height: 100%;
  padding: 0em 4em 0em 1em;
  min-width: 348px;
  margin-top: auto;
  margin-bottom: auto;
}

#navbar .navbar-links a {
  display: block;
  float: left;
  color: $base-grey;
  padding: 14px 20px 14px 20px;
  text-decoration: none;
  font-size: 14px;
  margin-top: auto;
  margin-bottom: auto;
}

#navbar .navbar-links a:hover:after {
  content: ' ';
  position: absolute;
  bottom: -10px;
  width: 0;
  height: 0;
  text-align: center;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: $base-grey transparent;
  margin: 0 auto;
  display: block;
}

<div class="navbar-links">
  <div class="navbar-dropdown">
    <button class="navbar-drop-btn">
      <div class="navbar-arrow"></div>
    </button>
    <div class="navbar-dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a [routerLinkActive]="['navbar-links-active']" [routerLink]="['insights']" (mouseover)="displayInsightDropDown();" (mouseleave)="hideInsightDropDown();">INSIGHTS</a>
  <a [routerLinkActive]="['navbar-links-active']" [routerLink]="['explore']">EXPLORE</a>
  <a [routerLinkActive]="['navbar-links-active']" [routerLink]="['aboutus']">ABOUT</a>
</div>

以下是结果的图片：

如您所见，箭头位于左侧，但从未位于中心。

任何建议都会有所帮助，谢谢。

Answer 1

您需要为绝对定位的::after设置上下文。为此，请在static标记中添加一个非position: relative位置（在这种情况下为<a>）。

为了使::after元素居中，我使用了left: calc(50% - 10px)，因为箭头的宽度是已知的（20px）。如果to箭头的大小可以变化，则可以使用：

left: 50%;
transform: translateX(-50%);

.navbar-links {
  margin-left: 10em;
  height: 100%;
  padding: 0em 4em 0em 1em;
  min-width: 348px;
  margin-top: auto;
  margin-bottom: auto;
}

.navbar-links a {
  position: relative; /** the absolute context **/
  
  display: block;
  float: left;
  color: grey;
  padding: 14px 20px 14px 20px;
  text-decoration: none;
  font-size: 14px;
  margin-top: auto;
  margin-bottom: auto;
}

.navbar-links a:hover::after {
  left: calc(50% - 10px);
  
  position: absolute;
  content: ' ';
  bottom: -10px;
  width: 0;
  height: 0;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: grey transparent;
  display: block;
  content: ' ';
}

body {
  overflow: hidden;
}

<div class="navbar-links">
  <a href="#">INSIGHTS</a>
  <a href="#">EXPLORE</a>
  <a href="#">ABOUT</a>
</div>

Answer 2

尽管答案是可以接受的，但是我还有使用CSS的flex属性的另一种解决方案，请在.navbar-links a内添加两行

display: flex;
justify-content: center;

无需计算

.navbar-links {
      margin-left: 10em;
      height: 100%;
      padding: 0em 4em 0em 1em;
      min-width: 348px;
      margin-top: auto;
      margin-bottom: auto;
    }

    .navbar-links a {
      position: relative;
      /** the absolute context **/

      display: flex;
      justify-content: center;
      float: left;
      color: grey;
      padding: 14px 20px 14px 20px;
      text-decoration: none;
      font-size: 14px;
      margin-top: auto;
      margin-bottom: auto;
    }

    .navbar-links a:hover::after {
      position: absolute;
      bottom: -10px;
      width: 0;
      height: 0;
      border-width: 10px 10px 0;
      border-style: solid;
      border-color: grey transparent;
      content: ' ';
    }

    body {
      overflow: hidden;
    }

<div class="navbar-links">
  <a href="#">INSIGHTS</a>
  <a href="#">EXPLORE</a>
  <a href="#">ABOUT</a>
</div>

在选择器之后使用时，问题居中箭头

2 个答案: