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。

垂直居中CSS中的“float：right”元素

1 个答案: