CODEWITHSUNDEEP
htmlcsslayoutweb
user782104
user782104

Reputation: 13545

Vertical center the "float:right" element in CSS

I have tried setting the line height , table cell and other solution but unfortunately none of them work for my case.

Here is the 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>

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

The site for reference

http://simplecredit.com.hk/

refer to the header bar , I would like to vertical center the bar icon. Thanks for helping , tried avoid duplicate question but no luck as the other solution not working in my scenario.

Thanks for helping

Upvotes: 0

Views: 57

Answers (1)

Xahed Kamal
Xahed Kamal

Reputation: 2223

Instead of using float:right, use position:absolute and apply the below 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;
}

You must have to use position:relative on header tag.

Upvotes: 1

Related Questions