在HTML中正确对齐图像和文本 [英] Align image and text properly in HTML

问题描述

这是示例:

我想将图像与名称对齐，但是图像以某种方式向上浮动了一点.有帮助吗?

I want to align the image along side with the name but somehow the image just floats up a little higher. Any help?

更新:

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

谢谢.

推荐答案

在 img 上使用 vertical-align ，因为它与内联内容相邻.

Use vertical-align on the img since it's adjacent inline content.

img {
    vertical-align: middle;
}

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

一个更奇特的方法是使用flexbox，但是对于您的用例而言，这是过大的选择.如果您想这样做，只需给他们一个父母，然后使用 align-items 影响垂直对齐.

A fancier way is to use flexbox, but it's overkill for your use case. If you wanted to do that, just give them a parent, and use align-items to affect vertical alignment.

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

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

这篇关于在HTML中正确对齐图像和文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！