html - 如何使一个元素在 div 中居中，同时保持它与另一个元素在同一水平面上？

Question

无法让我的图像居中，同时与我的图标保持在同一水平面上。

HTML

<div class="smalltop w3-top">
  <span class="w3-opennav w3-xlarge" onclick="w3_open()"><i id="menui" class="material-icons w3-xxlarge">menu</i></span>
  <a href="#"><img id="smalllogo" src="img/navlogo-invert.jpg"></a>
</div>

CSS

#smalllogo {
  max-height: 50px;
  width: auto;
  display: block;
  margin: 0 auto;
  border: 5px solid;
  margin-top: 5px;
}

#menui {
  left: 0;
}

.smalltop {
  background-color: #FFF;
  list-style-type: none;
  margin: 0 auto;
}

https://jsfiddle.net/pzLbruhx/

Answer 1

给容器添加相对定位，给图标添加绝对定位

#menui {
  left: 0;
  position:absolute;
}
.smalltop {
  background-color: #FFF;
  list-style-type: none;
  margin: 0 auto;
  position:relative;
}

jsFiddle example