如何在水平无序列表中居中列表项？答案

【问题标题】：How to center a list item inside a horizontal unordered list?如何在水平无序列表中居中列表项？
【发布时间】：2017-12-13 00:47:36
【问题描述】：

html/css 新手在这里。

我已经完成了一些关于 html/css 的课程，现在我正在尝试复制一些我喜欢的网站来测试我的知识。现在我正在尽最大努力制作可汗学院的首页（https://www.khanacademy.org），但我一直在努力解决一些问题。

我有一个代表页面顶部导航栏的<ul>，现在我试图将他们的徽标（<div id="ka"> 作为列表项在导航栏中）居中，但使用@987654325 @ 和 margin-left: auto; & margin-right: auto 似乎什么也没做。

这是我的代码：

body {
  margin: 0;
  padding: 0;
  background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
  background-repeat: no-repeat;
  background-size: 157.75%;
  background-position-x: 50.825%;
}

li {
  display: inline-block;
}

.navbar {
  overflow: hidden;
  width: 100%;
  height: 60px;
  border-bottom-color: #68e2de;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.navbar {
  list-style: none;
}

.navbar-text {
  color: white;
  float: left;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 17px;
  padding: 13px 38px 0px 4px;
  margin-left: -8px;
}

#ka {
  display: inline-block;
}

#ka-logo {
  float: left;
  width: 24px;
  margin-left: auto;
  margin-right: auto;
}

#search-icon {
  width: 32px;
  margin-left: -44px;
  margin-top: 8px;
}

#search-bar {
  background-color: #47dcd6;
  border-radius: 4px;
  margin-left: 8px;
  border: 1px solid #47dcd6;
  padding: 12px 175px 14px 12px;
}

#expand-triangle {
  font-size: 13px;
  margin-left: 7px;
  color: #85e8e3;
}

.bold-signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  font-size: 23px;
  color: white;
  font-weight: 600;
}

.signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  color: white;
  font-size: 23px;
}

#sign {
  float: right;
  margin-right: 44px;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <ul class="navbar">
    <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
    <li id="search-bar" class="navbar-text">Search</li>
    <li><img id="search-icon" src="search.png"></li>
    <li>
      <div id="ka">
        <img id="ka-logo" src="leaf-green.svg">
        <div class="bold-signika">KHAN</div>
        <div class="signika">ACADEMY</div>
      </div>
    </li>
    <li id="sign" class="navbar-text">New user / Sign up</li>
  </ul>
</body>

</html>

我似乎this question，但建议的内容对我不起作用。

我的问题是：如何使徽标 div 居中？

附注：由于我对 html 还很陌生，所以上面的代码中可能有很多不好的做法。非常感谢有关如何更有效地完成我所做的事情的提示。

【问题讨论】：

您的导航栏 ul 有 4 个 li 孩子。你想要其中一个居中吗？你确定居中吗？那么你打算如何向其他孩子展示呢？您的新用户和搜索框在右侧，主题在徽标左侧？你不是要平均分配你的 ul 孩子吗？

标签： html css

【解决方案1】：

这里是您问题的解决方案。

在CSS中，flex很有用，看看：

弹性指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我的 CSS

我使用flexbox 设置垂直居中的 div 并设置正确的 div。

对于徽标，我使用了first div，任务栏的高度和宽度为(non-clickable)，second，徽标居中(clickable) 和position absolute。

享受

body {
  margin: 0;
  padding: 0;
  background-image: url("https://cdn.kastatic.org/images/homepage/mountains-simple.svg");
  background-repeat: no-repeat;
  background-size: 157.75%;
  background-position-x: 50.825%;
}

li {
  display: inline-block;
}

.navbar {
  overflow: hidden;
  width: 100%;
  height: 60px;
  border-bottom-color: #68e2de;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  
  display: flex;
  align-items:center;
  position:absolute;
}

.navbar {
  list-style: none;
}

.navbar-text {
  color: white;
  float: left;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 17px;
  /**padding: 0 38px 0px 4px;**/
}

.logo {
  position:absolute;
  height:100%;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
}

.logo-container {
  display:flex;
  align-items:center;
  pointer-events:all;
}

.logo-container .ka-logo {
  width: 24px;
}

.left, .right {
  display:flex;
  align-items:center;
}

.left {
  margin:0 10px;
}

.right {
  justify-content:right;
  margin:0 10px 0 auto;
}

#search-icon {
  width: 32px;
  margin-left: -44px;
  margin-top: 8px;
}

#search-bar {
  background-color: #47dcd6;
  border-radius: 4px;
  margin-left: 8px;
  border: 1px solid #47dcd6;
  padding: 12px 175px 14px 12px;
}

#expand-triangle {
  font-size: 13px;
  margin-left: 7px;
  color: #85e8e3;
}

.bold-signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  font-size: 23px;
  color: white;
  font-weight: 600;
}

.signika {
  display: inline;
  font-family: 'Signika', sans-serif;
  color: white;
  font-size: 23px;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Signika:400,600" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div class="navbar">
    <div class="left">
      <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
      <li id="search-bar" class="navbar-text">Search</li>
      <li><img id="search-icon" src="search.png"></li>
    </div>
    <div class="logo">
      <div class="logo-container">
          <img class="ka-logo" src="leaf-green.svg">
          <div class="bold-signika">KHAN</div>
          <div class="signika">ACADEMY</div>
        </div>
    </div>
    <div class="right">
      <li class="navbar-text">New user / Sign up</li>
    </div>
  </div>


  <!--<ul class="navbar">
    <div class="left">
      <li class="navbar-text">Subjects<span id="expand-triangle">▼</span></li>
      <li id="search-bar" class="navbar-text">Search</li>
      <li><img id="search-icon" src="search.png"></li>
    </div>
    <div class="center">
      <li>
        <div id="ka">
          <img id="ka-logo" src="leaf-green.svg">
          <div class="bold-signika">KHAN</div>
          <div class="signika">ACADEMY</div>
        </div>
      </li>
    </div>
    <div class="right">
      <li id="sign" class="navbar-text">New user / Sign up</li>
    </div>
  </ul>-->
</body>

</html>

【讨论】：