垂直居中CSS中的「float：right」元素

Question

我已經嘗試設置行高，表格單元格和其他解決方案，但不幸的是它們都不適用於我的案例。

下面是HTML

 <header> 
      <a href="<?= site_url() ?>" ><img src="<?= base_url() ?>assets/images/logo.png?<?= time(); ?>"/><img src="<?= base_url() ?>assets/images/<?= get_lang_pic("logo_txt.png") ?>?<?= time(); ?>"></a> 
      <a id="toggle_menu" href="#menu"><i class="fa fa-bars"></i></a> 
     </header> 

和CSS

header { 
    background-color:#F6F4E2; 
    padding:5px 0px; 
} 

header img{ 
    display: inline-block; 
    vertical-align: middle; 
} 

header img:first-child { 
    max-width:50%; 
} 

header img:nth-child(2) { 
    max-width:20%; 
} 

header #toggle_menu { 
    color:#4C294F; 
    font-size:40px; 
    float:right; 
    display: table-cell; 
    vertical-align: middle; 
} 

該網站以供參考

http://simplecredit.com.hk/

指標題欄，我想垂直中心欄圖標。感謝您的幫助，儘量避免重複的問題，但沒有運氣，因爲另一種解決方案不適用於我的方案。

感謝您的幫助

Answer 1

而不是使用float:right，使用position:absolute和應用下面的CSS

header { 
    position:relative; 
} 

header #toggle_menu{ 
    display:block; 
    position: absolute; 
    top: 50%; 
    -moz-transform: translatey(-50%); 
    -ms-transform: translatey(-50%); 
    -o-transform: translatey(-50%); 
    -webkit-transform: translatey(-50%); 
    transform: translatey(-50%); 
    right: 5px; 
} 

您必須對header標籤使用position:relative。