CODEWITHSUNDEEP
htmlcss
DMP
DMP

Reputation: 543

Button should remain vertically aligned

I want to center align the button vertically, It should remain aligned vertically even if height and line-height of li is changed, or font-size of the button is changed.

 ul {
    display: table;
    width: 300px;
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    background-color: aqua;
}

 ul li {
    float: right;
    margin-right: 8px;
    height: 80px;
    line-height: 80px;
}

 ul li.header-logo {
    float: left;
    font-size: 50px;
}

#button {
    padding: 4px 6px;
    background-color: #ff9191;
    border: 2px solid #00b5cc;
    line-height: 24px;
}
<div id="logo-row">
    <ul>
        <li class="header-logo">AAA</li>
        <li><div id="button">BUTTON</div></li>
        <li>LINK</li>
    </ul>
</div>

Upvotes: 0

Views: 38

Answers (1)

gavgrif
gavgrif

Reputation: 15509

Add a display:inline to your button - and it should be fine

 ul {
    display: table;
    width: 300px;
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    background-color: aqua;
}

 ul li {
    float: right;
    margin-right: 8px;
    height: 80px;
    line-height: 80px;
}

 ul li.header-logo {
    float: left;
    font-size: 50px;
}

#button {
    display:inline;
    padding: 4px 6px;
    background-color: #ff9191;
    border: 2px solid #00b5cc;
    line-height: 24px;
}
<div id="logo-row">
    <ul>
        <li class="header-logo">AAA</li>
        <li><div id="button">BUTTON</div></li>
        <li>LINK</li>
    </ul>
</div>

Upvotes: 2

Related Questions