如何將元素居中在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

Answer 2

只要給物業float:left到#menui，並觀察結果

Answer 3

使用display:table\table-row\table-cell和vertical-align上圖標

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

.w3-opennav { 
    display: table-cell; 
    vertical-align: middle; 
} 

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

Fiddle