Question

我想将图像和2个文本放在一起。第一个文本位于最左侧。图像直接位于中心。最后一个文字位于最右边。这就是我现在所拥有的......

<body>

<h2><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h2>
<img src="website_art.png" height= "75" width= "235"/>
<h2><font color="#99CC00"><font face="Verdana">The Art of Gaming</font></h2>

</body>

我该怎么做？

由于

Answer 1

您不要在HTML代码中的正确位置关闭字体元素。

此外，将样式放在外部文件中也是一种很好的做法（我说的是CSS）。

对此进行更改：

<body>
    <div class="container">
        <h2>MrEpicGaming4U</h2>
        <img src="Your url" height="75" width="235"/>
        <h2>The art of gaming</h2>
    </div>
</body>

放入这些CSS规则：

h2 {
    font-family: "Verdana";
    color: #9C0;
}

.container > * {
    display: inline-block;
}

Answer 2

你不需要在最后一项上添加浮动......

<h2 style="float:left"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h2>
<img  style="float:left" src="website_art.png" height= "75" width= "235"/>
<h2 style="float:left"><font color="#99CC00"><font face="Verdana">The Art of Gaming</font></h2>

...但是你完成后应该清除它们。

<hr style="clear:both";>

Answer 3

   <h2 style="float:left;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h2>
   <div style="float:left;"><img src="website_art.png" height= "75" width= "235"/></div>
   <h2 style="float:right;"><font color="#99CC00"><font face="Verdana">The Art of Gaming</font></h2>
   <div style="clear:both;"></div>

Answer 4

<强>内联块：

h2, img{display: inline-block;}

如果你坚持使用float：left ，那么只需使用溢出：隐藏来制作容器div ......不需要添加 clear：both 额外的div ...

以下是两个例子：

http://jsfiddle.net/Riskbreaker/kAVQ3/2/

如何在HTML中将3个对象彼此相邻放置

4 个答案: