如何在不改变边框高度的情况下使文本居中答案

【问题标题】：How to centre text without changing height of border如何在不改变边框高度的情况下使文本居中
【发布时间】：2018-01-14 19:54:42
【问题描述】：

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;

什么都没有发生。这有什么问题？

【问题讨论】：

我看到你的文字居中，你能指定问题出现的时间或条件吗？

标签： html css flexbox height border

【解决方案1】：

要使文本居中，您可以使用display: flex 使您的弹性项目成为嵌套的弹性容器并添加align-items: center，我们也可以将text-align: center 替换为justify-content: 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：