I'm just trying to vertically align the image and the text so that the text is between the top and bottom side of the image ( the image's height is bigger than the text's ) but applying margin/padding to the <p>
class does nothing.
.navUsernameP {
display: inline;
color: #fff;
text-align: center;
text-decoration: none;
white-space: nowrap;
margin-bottom: 10px;
}
.navUsernameLi {
float: right;
margin-top: 10px;
}
.navProfilePicture {
display: inline;
border-radius: 50px;
vertical-align: inherit;
height: 24px;
width: 24px;
}
<li class='navUsernameLi'>
<img class='navProfilePicture' src='image.jpg'>
<p class='navUsernameP'>Username</p>
</li>