如何中心在不改变边界

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

看看这个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; 
} 

Answer 2

要居中的文字，你可以让你的Flex项目使用display: 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>