垂直居中浮动div元素仅使用css

Question

所以，我正在尝试创建一个可以重复使用的通用导航栏。 导航栏有左右子元素，分别左右浮动。

问题是左右子元素的高度是可变的，具体取决于内部的内容（由于不同的字体大小，图标使用和一些其他元素）。

我已经看到很多table和psuedo元素方法非常适合非浮动div。

目前我正在使用jquery来计算高度并使用位置绝对方法来解决这个问题。

有没有办法用干净的CSS来实现它？

<div class='navbar'> 
 <ul class='nav-left'></ul> //float: left
 <ul class='nav-right'></ul> //float: right
</div>

修改

我找到了一种不对两个元素都应用float的方法，因此它摆脱了绝对位置的方法 这是jsFiddle链接http://jsfiddle.net/dyrotn71/

Answer 1

是否需要浮动？

.navbar {
  position: relative;
}

.navbar[class^=nav] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.nav-left {
  left: 0;  
}
.nav-right {
  right: 0;
}

那将为你照顾它。

Another solution, no position: absolute

.navbar {
    border: 1px solid;
    display: block;
    padding: 10px;
}
.navbar:after {
    content: '';
    clear:both;
    display: table;
}

.navbar .nav {
    display: inline-block;
    vertical-align: middle;
}

.nav-right {
    transform: translateX(-200%);
    position: relative;
    left: 100%;
}