围绕中心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

回答

相关问题