css - 在 HTML 中正确对齐图像和文本

Question

这是例子:

我想将图像 与名称对齐，但不知何故图像只是浮得更高了一点。有帮助吗？

更新:

#profile_name_header {
  background-color: #006400;
  font-family: Century Gothic;
  color: #FFFFFF;
  font-size: 20px;
  padding-bottom: 12px;
  padding-top: 12px;
  padding-left: 10px;
}

<div id="profile_name_header">
  <img src=< ?php echo "./img/".$genderprofile. ""; ?> style = "height:30px; margin-bottom:0px;" >
  <?php echo $fullname;  ?>'s Profile
</div>

谢谢。

Answer 1

在 img 上使用 vertical-align，因为它是相邻的内联内容。

img {
    vertical-align: middle;
}

<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> @Dranreb

一种更高级的方法是使用 flexbox，但对于您的用例而言，这太过分了。如果您想这样做，只需给它们一个父项，并使用 align-items 来影响垂直对齐。

div {
  display: flex;
  align-items: center;
}

<div>
  <img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> @Dranreb
</div>