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

Question

这是一个例子：

我想将图像与名称对齐，但不知何故，图像只是浮动一点点。有什么帮助吗？

更新

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

谢谢。

Answer 1

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

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>

Answer 2

有一个名为vertical align的CSS属性，可用于将respecr中的几个html元素与文本基线对齐。我建议您将其设置为中心，但请尝试查看最适合的内容。

（关于开发者之间的冲突还有一些reading。）

Answer 3

为图像指定一个类名。对于例如

<img class="backgroundImg" src="images/bg.jpg" />

然后使用这些css属性：

.backgroundImg {
  position: relative;
  top: 5px; // or 10px
}

根据您的文字调配，只需调整＆＃34;顶部＆＃34;值。

注意：你也可以使用＆＃34; id＆＃34;并分配相同的css属性。

Answer 4

使用正确的 HTML 标记......

尝试此代码

＆＃13;

＆＃13;

*{
  margin: 0;
  padding: 0;
}
figure{
width:620px;
display: block;
margin:0 auto;
}
figure img{
  display: block;
  width: 100%;
  height: auto;
}
figcaption{
  text-align:center;
}

＆＃13;

<figure>
<img src="https://unsplash.it/600/280" alt="">
  <figcaption>
    <small>Image Caption goes here</small>
  </figcaption>

</figure>

＆＃13;

＆＃13;

＆＃13;