个人中心
gpt4 book ai didi

html - 如何使水平无序列表中的列表项居中？

转载 作者：太空宇宙 更新时间：2023-11-04 08:28:12 25 4
gpt4 key购买 nike

这里是 html/css 新手。

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

我有一个 <ul>代表页面的顶部导航栏，现在我试图将他们的 Logo (导航栏内作为列表项的 <div id="ka">)置于页面中心，但使用 text-align: center和 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但建议的内容对我不起作用。

我的问题是:如何使 Logo div 居中？

旁注:由于我是 html 的新手，所以上面的代码中可能存在很多不良做法。非常感谢有关如何更有效地完成我所做的事情的提示。

最佳答案

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

在 CSS 中，flex 非常有用，看看:

Flex guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我的 CSS

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

对于 Logo ，我使用了一个 first div 和任务栏的高度和宽度 (不可点击) 和一个 second Logo 以 (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>

关于html - 如何使水平无序列表中的列表项居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44992480/

25 4 0
文章推荐： c - execv 函数调用的参数无效
文章推荐： c - 套接字系列函数如何处理不同类型的结构？
文章推荐： java - 将 Eclipse(Java) 连接到 Oracle 数据库
文章推荐： C:读取文件并将它们存储到数据结构中
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com