Вертикальный центр «float: right» в CSS

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; 
} 

Вы должны использовать position:relative на header теге.