登录
当前位置： 首页 > 知识库问答 >
问题：

为什么我的菜单项不在中央（没有使用flexbox）？

奚昌胤
2023-03-14

我知道关于文本横向居中的话题不胜枚举。但我使用了搜索功能并尝试了答案。但这并不奏效。

我尝试了页边距-左：自动，页边距-右：自动，文本-对齐：中心等类nav-center。那不起作用。

我要Lorem Ipsum在Navbar的中心。

我做错了什么？

这是我的代码：

null

/*****************************************************************************************************************************************/
/************************************************************* styles.css ***************************************************************/
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:General Settings *** */
/*****************************************************************************************************************************************/

html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

/*****************************************************************************************************************************************/
/* *** END:General Settings  *** */
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:Navigation *** */
/*****************************************************************************************************************************************/

.navigation {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

.navigation > div {
  height:100%;
  display: inline-block;
  position: relative;
}


/* *** START: Nav-Logo *** */
nav div.nav-logo img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}
/* *** END: Nav-Logo *** */


/* *** START: Nav-Center *** */
nav .nav-center {
  text-align: center;
  margin-left:auto;
  margin-right:auto;
}

nav .nav-center > ul{
    display: inline-block;
}
/* *** END: Nav-Center *** */


/* *** START: Nav-End *** */
div.nav-end {
  float:right;
}
/* *** END: Nav-End *** */


/* *** START: Nav-Items *** */
div.nav-items ul {
  height: 100%;
  margin: 0;
}

div.nav-items ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
}

div.nav-items a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

div.nav-items a:link {
  color:#fff;
}

div.nav-items a:visited {
  color:#fff;
}

div.nav-items a:hover,
div.nav-items a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
/* *** END: Nav-Nav-Items *** */

/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>

    <!-- **************************************************************************************************************************************************** -->
    <!-- ***   START: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->

    <nav class="navigation">

      <!-- *** START: Logo *** -->
      <div class="nav-logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->


      <!-- *** START: Nav-Center *** -->
      <div class ="nav-center nav-items">
        <ul>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-Center *** -->


      <!-- *** START: Nav-End *** -->
      <div class="nav-end nav-items">
        <ul>
          <li class="active"><a href="index.html">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
          <li><a href="#">Page 4</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-End *** -->

    </nav>

    <!-- **************************************************************************************************************************************************** -->
    <!-- *** END: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->






  </body>
</html>

null

共有1个答案

黄沈浪
2023-03-14

从css第41行的div元素中删除height:100%；，对于水平中心，您需要为您的容器设置一个宽度。我确实编辑了您的css，使您的右导航上有49%的widht，左导航上有50%的widht，以便能够将其居中。另一个替代方法是使用flex

null

/*****************************************************************************************************************************************/
/************************************************************* styles.css ***************************************************************/
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:General Settings *** */
/*****************************************************************************************************************************************/

html{
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 1.6rem;
}

* {
  box-sizing: border-box;
}

/*****************************************************************************************************************************************/
/* *** END:General Settings  *** */
/*****************************************************************************************************************************************/


/*****************************************************************************************************************************************/
/* *** START:Navigation *** */
/*****************************************************************************************************************************************/

.navigation {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  font-weight: 400;
}

.navigation > div {
  display: inline-block;
  position: relative;
}


/* *** START: Nav-Logo *** */
nav div.nav-logo img {
  height: 3rem;
  width: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:2rem;
}
/* *** END: Nav-Logo *** */


/* *** START: Nav-Center *** */
nav .nav-center {
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  width: 50%;
}

nav .nav-center > ul{
    display: inline-block;
}
/* *** END: Nav-Center *** */


/* *** START: Nav-End *** */
div.nav-end {
  float:right;
  width:49%;
}
/* *** END: Nav-End *** */


/* *** START: Nav-Items *** */
div.nav-items ul {
  height: 100%;
  margin: 0;
}

div.nav-items ul li {
  display: inline-block;
  height:100%;
  padding: 0 1rem;
}

div.nav-items a {
  text-decoration: none;
  vertical-align: middle;
  line-height: 5rem;
}

div.nav-items a:link {
  color:#fff;
}

div.nav-items a:visited {
  color:#fff;
}

div.nav-items a:hover,
div.nav-items a:active {
  color:#e5e5e5;
}

.active {
  background-color: #a62c21;
}
/* *** END: Nav-Nav-Items *** */

/*****************************************************************************************************************************************/
/* *** END:Navigation *** */
/*****************************************************************************************************************************************/
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="src/css/styles.css">
  </head>
  <body>

    <!-- **************************************************************************************************************************************************** -->
    <!-- ***   START: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->

    <nav class="navigation">

      <!-- *** START: Logo *** -->
      <div class="nav-logo">
        <a href="index.html">
          <img src="src/img/logo.png" alt="logo">
        </a>
      </div>
      <!-- *** END: Logo *** -->


      <!-- *** START: Nav-Center *** -->
      <div class ="nav-center nav-items">
        <ul>
          <li><a href="#">Lorem</a></li>
          <li><a href="#">Ipsum</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-Center *** -->


      <!-- *** START: Nav-End *** -->
      <div class="nav-end nav-items">
        <ul>
          <li class="active"><a href="index.html">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
          <li><a href="#">Page 4</a></li>
        </ul>
      </div>
      <!-- *** END: Nav-End *** -->

    </nav>

    <!-- **************************************************************************************************************************************************** -->
    <!-- *** END: Navigation *** -->
    <!-- **************************************************************************************************************************************************** -->






  </body>
</html>
 类似资料：
  • 为什么我不能对菜单中的多个项目使用相同的图标？

    我有一个

  • 为什么eclipse SVN团队菜单没有显示所有选项？

    我不熟悉eclipse IDE。我在代码中做了一些更改，希望签入/提交我的更改到svn。但当我右键点击一个项目并选择团队选项时，我看不到提交、更新等选项。我在互联网上搜索过这个问题，并尝试了以下选项， 未安装 关于我正在使用的eclipse IDE的更多详细信息如下，版本：Luna Service Release 1（4.4.1）Build id:20140925-1800 我在windows 8

  • 为什么没有清单>”在Java中？

    问题内容： 在Java中，为什么以下代码行不起作用？ 如果我将其更改为 起初，我以为您可能没有接口列表，但是我可以创建一个很好的接口。 有想法吗？ 问题答案： 泛型类型比较古怪。 表示或任何子类型，但仅表示。如果您想要一个子类型，您需要 我怀疑你可以用 无法执行此操作的原因是，您可以使用对引用的引用，并且必须谨慎使用额外的间接级别。 使用泛型，您可以有两个间接级别，这会给您带来问题，因此它们更容易

  • 为什么Android操作菜单项不更新

    我已经为消息创建了一个操作栏项，当收到新消息时，它应该被更新。问题是，当我刷新活动时，它有时会将图标显示为新消息，有时则不会显示新消息。这是随机发生的。它没有正确更新。我检查了如何更新ActionBar中显示的菜单项？ 但无法解决我的问题。我意识到问题是onCreateOptionMenu在oncreate时执行。我如何延迟？

  • 为什么我的子菜单没有显示定义的悬停更改？

    我正在试图找到为什么我的下拉菜单（只有HTML，CSS)不工作的原因。我正在使用经典的：hover选项来更改显示：none；显示：flex；。我的目标是，当用户悬停在“Unsere Produkte”上时，会出现一个子菜单。在需要隐藏之前。如果有人能帮我，我会很高兴的。非常感谢。 null null

  • 为什么 Subversive 插件选项没有出现在我的 Eclipse 项目中？

    我在Mac 10.9.5上使用以下版本的Eclipse（实际上是SpringSource Tool Suite）： 我试图安装颠覆性的插件，用于我的Maven项目(使用SVN)。我从他们的网站下载了zip文件，然后创建了以下目录: 我将插件解压缩到这个目录中。然后我重新启动了Eclipse实例。然而，在包资源管理器中右键单击我的项目时，我看不到“团队”下的任何签入选项。在命令行上，这些项目确实有“

相关问答

为什么 Subversive 插件选项没有出现在我的 Eclipse 项目中？我的导航抽屉在单击菜单项后没有关闭？为什么docker没有识别我的"-f"选项？为什么没有使用jQuery找到我的KendoDatePicker值？为什么MySQL认为我没有使用WHERE语句？

相关文章

为什么我的组件没有包装在Swing的FlowLayout中？为什么Postgres没有在查询中使用索引为什么我们在Hibernate中使用@EmbeddablePython-为什么在类中使用“自我”？为什么ElasticSearch没有找到我的术语

相关阅读

Struts2的FilterDispatcher和StrutsPrepareAndExecuteFilter有什么不同？为什么要使用A/B测试？为什么使用R语言做统计？2.6.2 菜单(Menu)JavaFX菜单(Menu)

相关工具

滚动菜单四格菜单旋转菜单左右菜单Demo立方体菜单

相关文档

Git 菜单我们如何走到今天：重塑世界的6项创新安全备忘单翻译项目（OWASP Cheat Sheet Series）Sphinx 中文使用手册StackExchange.Redis 中文使用文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.