Html 如何在导航栏中水平居中放置分组元素

我正在构建一个导航栏，它有很多选项和特殊部分。 我使用Twitter引导，但很难开发。 nav html标记有三个部分，分为左、中、右三个部分。 我有困难在水平居中的文字和标志的公司在左分区，锚与导航项目在右分区。 我需要在CSS中设置导航栏的高度，而不是基于子元素计算高度

这是html：

navbar先生{ 溢出：隐藏；/*如果内容大于父元素，则从内容中剪辑*/ 背景色：333； 位置：固定；/*导航栏的位置固定*/ 排名：0； 宽度：100%； 高度：50px； } .左导航栏{ 浮动：左； 背景：卡德蓝； 宽度：230px； 身高：100%； 文本对齐：居中； } .右导航栏{ 浮动：对； 背景：褐红色； 身高：100%； /*浮动：对； 位置：绝对位置； 顶部：50%；右侧：0%； 转化：转化-50%，-50%； 背景：金； 填充：1.5雷姆*/ } .中央导航栏{ 位置：绝对位置； 顶部：50%；左侧：50%； 转化：转化-50%，-50%； 背景：金； 填充：1rem； } .左导航条强{ 颜色：红色； 填充：10px 10px； 显示：内联块； 文本对齐：居中； 垂直对齐：居中； } .左导航条img{ 宽度：32px； 高度：32px； 填充：10px 10px； } 纳瓦尔先生{ 浮动：右；/*父元素中元素的方向*/ display:block；/*全覆盖左上右下它是一个块-元素在嵌入的元素上都有块/填充*/ 颜色：F2F2； 文本对齐：居中； 填充：14px 16px；/*14px顶部和底部，16px右侧和左侧*/ 文本装饰：无；/*可以是下划线、上划线、横线*/ 字号：17px； } /*仅适用于navbar类内的锚点*/ .导航栏a:悬停{ 背景：ddd； 颜色：黑色； } 输入[类型=文本]{填充：5px 5px；行高：28px；} 公司

---

左导航栏-水平和垂直居中显示：flex

 .left-navbar {
display: flex;
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;

}

---

另外，您希望导航栏的右侧部分如何显示？

Give.left导航栏-水平和垂直居中显示：flex

 .left-navbar {
display: flex;
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;

}

---

另外，您希望导航栏的正确部分是什么？

您可以使用flexbox来实现这一点

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

---

你有密码笔，如果有帮助请告诉我

您可以使用flexbox来实现这一点

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

---

你有密码笔，如果有帮助请告诉我

Flex box是您在这里想要使用的。将display:flex添加到.navbar，然后添加flex-grow:1；到中间一块。这实质上是说“让这个元素跨越flex容器中的剩余空间。另外，你的身高：100%是不必要的，所以我把它们去掉了

navbar先生{ 溢出：隐藏；/*如果内容大于父元素，则从内容中剪辑*/ 背景色：333； 位置：固定；/*导航栏的位置固定*/ 排名：0； 宽度：100%； 高度：50px； 显示器：flex； } .左导航栏{ 背景：卡德蓝； 宽度：230px； 文本对齐：居中； } .右导航栏{ 背景：褐红色； } .中央导航栏{ 背景：金； 填充：1rem； 柔性生长：1； } 输入[类型=文本]{ 填充物：5px 5px； 线高：28px； 宽度：100%； 框大小：边框框； }

---

Flex box是您在这里想要使用的。将display:flex添加到.navbar，然后添加flex-grow:1；到中间一块。这实质上是说“让这个元素跨越flex容器中的剩余空间。另外，你的身高：100%是不必要的，所以我把它们去掉了

navbar先生{ 溢出：隐藏；/*如果内容大于父元素，则从内容中剪辑*/ 背景色：333； 位置：固定；/*导航栏的位置固定*/ 排名：0； 宽度：100%； 高度：50px； 显示器：flex； } .左导航栏{ 背景：卡德蓝； 宽度：230px； 文本对齐：居中； } .右导航栏{ 背景：褐红色； } .中央导航栏{ 背景：金； 填充：1rem； 柔性生长：1； } 输入[类型=文本]{ 填充物：5px 5px； 线高：28px； 宽度：100%； 框大小：边框框； }

---

它在Martin提供的代码笔中的外观。非常感谢。它在Martin提供的代码笔中的外观。非常感谢。