如何创建等高的 w3-bar 内容

Question

目前我正在尝试使用 w3.css 中新添加的 w3-bar class 创建带有一些按钮和徽标的顶部导航。

如果导航栏只包含按钮，一切正常，因为按钮的高度在任何地方都是相同的。

现在，当我尝试将徽标添加到高于按钮的导航栏时，按钮将放置在栏的顶部。

<div class="w3-border w3-light-grey w3-bar" style="height: 80px">
    <a class="w3-bar-item w3-button" href="#">Home</a>
    <img class="w3-bar-item" src="http://lorempixel.com/200/56/">
    <a class="w3-bar-item w3-button" href="#">Link 1</a>
    <a class="w3-bar-item w3-button" href="#">Link 2</a>
    <a class="w3-bar-item w3-button w3-green w3-right" href="#">Link 3</a>
</div>

我想管理它以将按钮放在垂直中间位置，这样看起来更好。

当我使用 w3-cell-row 和 w3-cell-middle 时，我可以管理这个垂直居中的按钮，如下所示：

<div class="w3-border w3-light-grey w3-cell-row" style="height: 80px">
    <a class="w3-cell w3-cell-middle w3-button" href="#">Home</a>
    <img class="w3-cell w3-cell-middle " src="http://lorempixel.com/200/56/">
    <a class="w3-cell w3-cell-middle  w3-button" href="#">Link 1</a>
    <a class="w3-cell w3-cell-middle  w3-button" href="#">Link 2</a>
    <a class="w3-cell w3-cell-middle  w3-button w3-green w3-right" href="#">Link 3</a>
</div>

但是如果我尝试将 w3-bar 导航栏中的按钮垂直居中，我将无法正常工作。

您可以查看此 fiddle 以查看两个不同的结果：

https://jsfiddle.net/TheChaos/o1cg5e64/

有人知道如何使用 w3.css class es（或一些额外的 css）完全垂直居中（并填充导航栏）吗？

Answer 1

好了，这能解决您的问题吗？

https://jsfiddle.net/byxw86d1/

我已经从父项 div 中删除了 inline-height 并向图像添加了 .brand class 以进行样式设置。较大的导航项目对小屏幕用户来说更好，尽管您可以为此设置一个断点

<div class="w3-border w3-light-grey w3-cell-row" style="height: 80px">

.brand {
  display:block;
  height:auto;
  width:100%;
  margin-bottom:0 !important;
}

<!-- create full size image for larger screen OPTIONAL -->
.w3-cell-row {
  display:block;
}

Answer 2

我正在添加另一个答案，因为我相信第一个答案对某些读者仍然有帮助。

https://jsfiddle.net/showcaseimagery/8r9bmgm3/

这个 CSS 的 .w3-bar-item 可以做到，我已经添加了其他两种可选样式

.w3-bar-item {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#brand {
  display: block !important;
  padding: 0 !important;
}

img#brand {
  height: 100%;
  width: auto;
}

对 html 的唯一更改为 #brand

如何创建等高的 w3-bar 内容

how to create w3-bar content with equal height

html

css

w3.css