html css 中心，忽略其他元素

Answer 1

你的意思是这样吗？:

a.link:has(> i.fa-solid) {
    text-align: center;
    display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="nav-menu">
  <a href="#" class="link">
    <p class="nav-item">Home</p>
  </a>
  <a href="#" class="link">
    <p class="nav-item">Services</p>
  </a>
  <a href="#" class="link">
    <p class="nav-item">About us</p>
  </a>
  <a href="#" class="link">
    <i class="fa-solid fa-house"></i>
  </a>
  <a href="" class="link">
    <p class="sign-in">Login</p>
  </a>
  <a href="" class="link">
    <p class="sign-up">Sign Up</p>
  </a>
</div>

这利用了相对较新的

:has()

伪类 来指定

<a>

元素，该元素具有与

i.fa-solid

选择器匹配的子元素。从那里，它可以简单地将显示更改为

block

并将文本居中。

如果您愿意，您还可以使用

display: inline-block

并将

width

设置为

100%

。

请注意，

<a>

的宽度随后会增长以匹配父容器的宽度。我假设这不是问题，因为其余

<a>

元素的宽度已经在您的代码中做到了这一点。