如何中心在不改變邊界

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;

理智最多正在發生的事情。那有什麼問題？

來源

2017-08-07 Riko543

我看到你的文字居中，何時或在何種條件下出現的問題，您可以指定？ –

看看這個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; 
}

來源

2017-08-07 14:18:30 IlReDelleFinte

要居中的文字，你可以讓你的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>

來源

2017-08-07 14:26:51

如何中心在不改變邊界

回答

相關問題