Question

我在尝试将图像和h1标签对齐在一行时遇到问题。我试过显示：内联和内联块，它们没有工作，只制作了两者的容器。我在该部分添加了100％的宽度，但仍然没有。 Float也不起作用，如果确实如此，它会搞砸页面的对齐方式。我究竟做错了什么？在这里查看我的完整源代码：http://jsfiddle.net/TheAmazingKnight/bkmyv/

HTML

<section>
    <img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
    <h1>FOLLOW ME ON...</h1>
</section>

CSS

section{
display:inline-block;
width:100%;
}
h1{
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
display:inline-block;
}

Answer 1

这是因为默认情况下图像显示为块元素，因此它们占据整行。

将您的图片更改为display: inline-block;，就像使用h1元素一样。

h1, img {
    display: inline-block;
}

这里是一个小提琴：

http://jsfiddle.net/ps2ms/

Answer 2

我将float:left;添加到#me，将float:right;添加到h1 Fiddle

#me{
  width: 600px;
  height: 400px;
  display: block;
  margin: 10px 10px;
  float: left;
}
h1{
  display:inline-block;
  font-weight:bold;
  font-size:40px;
  color:#FFFFFF;
  background-color:#FFB405;
  float: right;
  margin: 10px;
}

Answer 3

只需在show：left。

部分中给出img

如何将h1标签和图像标签对齐在一条线上？

3 个答案: