Html 如何在不改变边框高度的情况下居中显示文本

正文{
背景色：#660033；
填充：0；
保证金：0；
}
导航{
背景色：#FFF033；
高度：100px；
显示器：flex；
}
保险商实验室{
保证金：自动；
显示器：flex；
边际：0px；
填充：0px；
列表样式类型：无；
宽度：100%；
}
ul>li{
身高：100%；
保证金：自动；
文本对齐：居中；
弹性：1；
右边框：2个虚线#660066；
}
李：第一个孩子{
左边框：2个虚线#660066；
}

看看这个！ 我更改了显示属性，不知道是否适合您。我甚至不知道我是否在回答你的问题，我以为你想实现垂直对齐：中间，但你没有指定！希望我能帮忙

HTML:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=MedievalSharp" rel="stylesheet">

<header>
  <nav>
    <ul>
      <li><a href="#">Games</a></li>
      <li><a href="#">Music</a></li>
      <li><a href="#">Films</a></li>
      <li><a href="#">Photos</a></li>
    </ul>
  </nav>
  <header>

---

要使文本居中，您可以使用

display:flex

使您的flex项目成为嵌套的flex容器，并添加

align items:center

，我们还可以将

text align:center

替换为

justify content:center

演示：

正文{
背景色：#660033；
填充：0；
保证金：0；
}
导航{
背景色：#FFF033；
高度：100px；
显示器：flex；
}
保险商实验室{
保证金：自动；
显示器：flex；
边际：0px；
填充：0px；
列表样式类型：无；
宽度：100%；
}
ul>li{
身高：100%；
保证金：自动；
弹性：1；
右边框：2个虚线#660066；
显示：flex；/*新*/
对齐项目：居中；/*新建*/
对齐内容：中心；/*新建*/
}
李：第一个孩子{
左边框：2个虚线#660066；
}

我看到您的文本居中，您能否指定问题出现的时间或条件？

body {
  background-color: #660033;
  padding: 0;
  margin: 0;
}

nav {
  background-color: #FFF033;
  height: 100px;
  display: flex;
}

ul {
  margin: auto;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  width: 100%;
  display:table;
  height:100%;
}

ul>li {
  height: 100%;
  text-align: center;
  border-right: 2px dashed #660066;
  display:table-cell;
  vertical-align:middle;
}

ul>li:first-child {
  border-left: 2px dashed #660066;
}