HTML / CSS：重排后水平居中的文本

Question

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

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

一旦我调整浏览器大小，文本就会重新开始：

问题是如何在回流后将文本居中？ SELECT t.[text] FROM sys.dm_exec_cached_plans AS p CROSS APPLY sys.dm_exec_sql_text(p.plan_handle) AS t 在这里没有帮助，text-align也没有。

HTML看起来像这样：

margin: 0 auto

CSS：

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

Answer 1

使用display: block＆amp; text-align: center上的.root-nav-links属性，例如：

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

希望这有帮助！

Answer 2

div - ＆gt; text-align: center

links - ＆gt; block

.desktop {
  display: flex;
  align-items: center;
  align-content: center;
}

.desktop div {
  text-align: center;
}

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

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

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

看起来将每个元素视为内联块并向其添加对齐中心应该在将单词强制转换为多行时将文本居中。基于这些评论，我现在不太确定这是你所问的问题。

Answer 4

它应该是这样的： Html

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

的CSS：

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

jsfiddle：https://jsfiddle.net/622L0mqz/