How to reduce the heigh of a link and keep the text height aligned?-CodePudding

I am working on a simple menu like this

<div className="main-menu">
        <ul>
          <li className="main-menu__app-menu"><a href="#">link 1</a></li>
          <li className="main-menu__app-menu"><a href="#">link 2</a></li>
          <li className="main-menu__app-menu"><a href="#">link 3</a></li>
          <li className="main-menu__user-menu"><a href="#">link 4</a></li>
          <li className="main-menu__user-menu"><a href="#">link 5</a></li>
        </ul>
      </div>

with this css

.main-menu {
    border-bottom: 1px solid #000000;

    & > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;

        & > li {
            display: inline;
            border: 1px solid #FF0000;
            height: 50px;

            & > a {
                display: block;

                text-align: center;
                padding: 1.4rem 1.6rem;
                color: #000000;
                text-decoration: none;

                &:hover {
                    color: #808080;
                }
            }


        }
    }

    &__app-menu {
        float:left;
    }

    &__user-menu {
        float:right;
        border: 1px solid #000000;
        border-radius: 1.5rem;
        margin: 0 .1rem;
    }
}

the two __user-menu links have a border but if I reduce its height, the link stay fixed and is not displayed in the middle of the button.

Where should I set the height in order to always have the label height centered?

CodePudding user response：

you have set the padding as padding: 1.4rem 1.6rem; which adds 1.4rem in the top and bottom, hence if you try to reduce the height, it won't since its been occupied by the padding.

replace it with this: padding: 0 1.4rem 0rem 1.4rem;

this ensures that you have 1.4rem padding only on the left and right of the element.

Also make sure you have inserted * {box-sizing: border-box;} on top of the CSS code. :)