HTML/CSS : horizontally center text after reflow

Question

我确定之前已经回答过这个问题，但我似乎无法在任何地方找到它。

我有一个带链接的工具栏:

一旦我调整了浏览器的大小，文本就会重排:

问题是如何在重排后将文本居中？ text-align 在这里没有帮助，margin: 0 auto 也没有。

HTML 看起来像这样:

<div class="desktop">
  <div>
    <a class="root-nav-links" href="/details">Event Details</a>
  </div>
  <div>
    <a class="root-nav-links" href="/details">...</a>
  </div>
  ...
</div>

CSS:

.desktop {
  display:                            flex;
  align-items:                        center;
}
.root-nav-links {
  margin:                             0 15px;
  padding:                            2px 6px;
}

Answer 1

在 .root-nav-links 上使用 display: block & text-align: center 属性，例如:

.root-nav-links {
  display: block;
  text-align: center;
  margin:0 15px;
  padding:2px 6px;
}

看看下面的代码片段(尝试压缩浏览器宽度):

.desktop {
  display: flex;
  align-items: center;
  background: #6440C0;
  padding: 10px 0;
}
.root-nav-links {
  text-decoration: none;
  display: block;
  text-align: center;
  margin: 0 15px;
  padding: 2px 6px;
  color: white;
}

.root-nav-links:hover {
  color: white;
  text-decoration: underline;
}

body {
  margin: 0;
}

<div class="desktop">
  <div>
    <a class="root-nav-links" href="/eventdetails">Event Details</a>
  </div>
  <div>
    <a class="root-nav-links" href="/schedule">Schedule</a>
  </div>
  <div>
    <a class="root-nav-links" href="/floorplan">Floor Plan</a>
  </div>
  <div>
    <a class="root-nav-links" href="/details">Directory</a>
  </div>
</div>

希望这对您有所帮助!