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
  • 204,283
  • 31
  • 260
  • 272
Onyx
  • 5,186
  • 8
  • 39
  • 86

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>