logo标签列表

将行内ul/li居中对齐到中心li元素周围

htmlcss
4

我需要为学校的计算机科学课程制作一个网站，但是我在让菜单栏居中时遇到了问题。我想让它围绕菜单按钮居中，但是我使用的方法会使图标偏离中心。

如何将整个菜单围绕中央的li元素居中呢？

以下是代码：

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

1
@Rob 如果我正确理解问题的话，我认为他想让其他的li元素在页面中心对齐的图片周围流动。 - Maximillian Laumeister
1
@MaximillianLaumeister 是的，完全正确。 - Candy_In_Mah_Van
1
我仍然不确定你在问什么...也许可以包含一些图像来解释你想要的结果？ - Talya S
2个回答
2
以下是代码更改内容：
您需要添加：
.menuBar ul{
padding-left: 0px;}

also relace this :

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

  • 最好减小字体大小以使其在框架内对齐。
1
我使用 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/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接