尝试垂直对齐 <img> 和 <p>，但是，margin 和 padding 在应用时不起作用[重复]

Posted 2023-03-05

【中文标题】尝试垂直对齐 <img> 和 <p>，但是，margin 和 padding 在应用时不起作用[重复]

【英文标题】：Trying to vertically align <img> and <p>, however, margin and padding do nothing when applied [duplicate]

【发布时间】：2018-09-21 19:15:36

【问题描述】：

我只是试图垂直对齐图像和文本，使文本位于图像的顶部和底部之间（图像的高度大于文本的高度）但将边距/填充应用于<p>类什么都不做。

.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>

【参考方案1】：

啊，垂直对齐。 Web 开发人员的祸根。我建议使用 Flexbox 来对齐项目，如下所示：

.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>