如何在不更改边框高度的情况下居中文本

Question

body {
background-color: #660033;
padding: 0;
margin: 0;
}
nav {
background-color: #FFF033;
height: 100px;
display: flex;
}
ul {
margin: auto;
display: flex;
margin: 0px;
padding: 0px;
list-style-type: none;
width: 100%;
}
ul>li {
height: 100%;
margin: auto;
text-align: center;
flex: 1;
border-right: 2px dashed #660066;
}
ul>li:first-child {
border-left: 2px dashed #660066;
}

<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge.chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<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>

如何在不更改右边框高度的情况下在 ul 列表中居中文本？ 当我尝试删除高度：100% 时，右边框的高度也发生了变化，为什么当我更改

flex:1;

例如

flex:2;

诺西格正在发生。这有什么问题？

Answer 1

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

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

.CSS：

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

Answer 2

要使文本居中，您可以使用display: flex使您的 flex 项目成为嵌套的 flex 容器并添加align-items: center，我们也可以用justify-content: center替换text-align: center。

演示：

body {
background-color: #660033;
padding: 0;
margin: 0;
}
nav {
background-color: #FFF033;
height: 100px;
display: flex;
}
ul {
margin: auto;
display: flex;
margin: 0px;
padding: 0px;
list-style-type: none;
width: 100%;
}
ul > li {
height: 100%;
margin: auto;
flex: 1;
border-right: 2px dashed #660066;
display: flex; /* new */
align-items: center; /* new */
justify-content: center; /* new */
}
ul > li:first-child {
border-left: 2px dashed #660066;
}

<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge.chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<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>