0

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>
j08691
  • 190,436
  • 28
  • 232
  • 252
Bobimaru
  • 3,460
  • 3
  • 14
  • 37

1 Answers1

1

Ah, vertical alignment. Bane of the web developer. I would suggest using Flexbox to align the items like so:

.container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.image {
  flex: 0 1 auto;
  width: 50px;
  height: 50px;
  background: red;
}

.username {
  flex: 0 1 auto;
}
<div class="container">
  <img class="image" src="image.png"/>
  <p class="username">Username</p>
</div>