Center content in a border CSS

0

I would like the Sign In / Sign up to be vertically centered within the borders, but I can not do that.

The following is the code below:

HTML:

<ulclass="menu_2">    
    <div class="user"><li><i class="fa fa-user"></i> Entre/Cadastre-se<i class="fa fa-angle-down"></i></li></div> 
</ul>

CSS:

.menu_2{
    padding: 10px;
    font-size: 10pt;  
    margin-top: 20px;
    color: #6495ED;
}

.user{
    margin-right: 30px;
    font-size: 12pt;
    border: 1px solid;
    float: left;
    height: 49px;
}
    
asked by anonymous 27.09.2017 / 20:22

1 answer

1

use line-height with the same height as elemento

ul {
list-style: none;
}

.menu_2{
padding: 10px;
font-size: 10pt;  
margin-top: 20px;
color: #6495ED;
}

.user{
margin-right: 30px;
font-size: 12pt;
border: 1px solid;
float: left;
height: 49px;
line-height: 49px;
}
<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>

<ul class="menu_2">    
<div class="user"><li><i class="fa fa-user"></i> Entre/Cadastre-se<i class="fa fa-angle-down"></i></li></div> 
</ul>
    
27.09.2017 / 20:43