圍繞中心li元素居中一個內聯ul/li

我必須在學校爲計算機科學制作一個網站，並且在居中菜單欄時遇到問題。我希望它以菜單按鈕爲中心，但它會使我的圖標偏離中心。圍繞中心li元素居中一個內聯ul/li

如何將整個菜單置於中心li元素周圍？

下面的代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title> Homepagina </title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
</head> 
<body> 

    <div class="menuBar"> 
     <ul> 
      <li> <a href="#"> Over mij </a> </li> 
      <li> <a href="#"> Hobbies </a> </li> 
      <li> <a href="#"> <img src="logoNaam.jpg"> </a> </li> 
      <li> <a href="#"> Muziek </a> </li> 
      <li> <a href="#"> Waarom informatica </a> </li> 
     </ul> 
    </div> 

    <div class="jumbotron"> 
     <div class="container"> 

      hoi 

     </div> 
    </div> 

</body> 
</html>

body { 
    background-color: /*#C94421*/ #353535; 
    margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */ 
    text-align: center; 
} 

.menuBar { 
    height: 70px; 
    width: 100%; 
} 

.menuBar img { 
    text-align: center; 
} 

.menuBar ul li { 
    display: inline; 
    padding-right: 65px; 
    line-height: 70px; 
} 

.menuBar ul li a { 
    color: white; 
    text-decoration: none; 
    line-height: 70px; 
    font-family: 'Raleway', sans-serif; 
    font-size: 36px; 
    width: 100px; 
} 

.menuBar a:hover { 
    border-bottom: 1px solid white; 
} 

.jumbotron .container { 
    height: 550px; 
    width: 60%; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    padding: 10px; 
    border-top: 4.5px double white; 
    border-bottom: 4.5px double white; 
}

來源

2015-10-13 Candy_In_Mah_Van

@Rob如果我正確地閱讀了這個問題，我想他想讓其他'li'元素在頁面中居中的圖像周圍流動。 –

@MaximillianLaumeister是的確切 –

我仍然不確定你在問什麼......也許包括你想要的結果的一些圖像來解釋？ –

下面是代碼的更改：

您必須添加：

.menuBar ul{ 
padding-left: 0px;}

也relace這樣的：

.menuBar ul li { 
display: inline; 
padding-right: 65px; 
line-height: 70px;}

與

.menuBar ul li { 
display: inline-block; 
width: 150px; 
padding-right: 15px; 
line-height: 70px;}

而且從.menuBar ul li a

更好的去除width: 100px;，減少字體大小，得到很好的框架對齊。

來源

2015-10-13 17:27:35 nabeel

謝謝你做到了！ –

歡迎您！ – nabeel

我使用Flexbox的佈局爲中心的形象。圖像始終位於頁面的中心位置，菜單項將流向居中圖像的左側和右側。

我調整了字體大小和填充，使它在演示中顯示得很好。我還需要將li更改爲div以使菜單在更改後以語義方式工作。

現場演示：

body { 
 
    background-color: /*#C94421*/ #353535; 
 
    margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */ 
 
    text-align: center; 
 
} 
 

 
.menuBar { 
 
    height: 70px; 
 
    width: 100%; 
 
} 
 

 
.menuBar img { 
 
    text-align: center; 
 
} 
 

 
.menuBar { 
 
    display: flex; 
 
} 
 

 
.menuBar > div { 
 
    display: block; 
 
    line-height: 70px; 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
} 
 

 
.left { 
 
    text-align: right; 
 
} 
 

 
.right { 
 
    text-align: left; 
 
} 
 

 
.menuBar > div > div { 
 
    display: inline-block; 
 
    padding: 0 15px; 
 
} 
 
.menuBar > div.central { 
 
    flex-basis: auto; 
 
    flex-grow: 0; 
 
    padding: 0 15px; 
 
} 
 

 
.menuBar > div a { 
 
    color: white; 
 
    text-decoration: none; 
 
    line-height: 70px; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-size: 14px; 
 
    width: 100px; 
 
} 
 

 
.menuBar a:hover { 
 
    border-bottom: 1px solid white; 
 
} 
 

 
.jumbotron .container { 
 
    height: 550px; 
 
    width: 60%; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    padding: 10px; 
 
    border-top: 4.5px double white; 
 
    border-bottom: 4.5px double white; 
 
}

<div class="menuBar"> 
 
      <div class="left"><div> <a href="#"> Over mij </a> </div> 
 
       <div> <a href="#"> Hobbies </a> </div></div> 
 
      <div class="central"> <a href="#"> <img src="logoNaam.jpg"> </a> </div> 
 
       <div class="right"> 
 
      <div> <a href="#"> Muziek </a> </div> 
 
      <div> <a href="#"> Waarom informatica </a> </div> 
 
       </div> 
 
    </div> 
 

 
    <div class="jumbotron"> 
 
     <div class="container"> 
 

 
      hoi 
 

 
     </div> 
 
    </div>

的jsfiddle版本：https://jsfiddle.net/2ejfdoc3/1/

來源

2015-10-13 17:21:19

圍繞中心li元素居中一個內聯ul/li

回答

相關問題