HTML - 在新行中放置图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3936697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML - Position an image in a new line
提问by David Casillas
I have a series of paragraphs. Each one ends with a illustration which clarifies the subject being explained in the paragraph.
我有一系列的段落。每一个都以一个插图结束，该插图阐明了该段落中解释的主题。
I want the illustration to be on a new line and not display along with the text and I have found the following solutions, with it's own problems:
我希望插图在一个新行上而不是与文本一起显示，我找到了以下解决方案，但它有自己的问题：
Put the illustration in a different <p> than the text related to the illustration.
将插图放在与插图相关的文本不同的 <p> 中。
<p>Some text here<p/>
<p><img src="myphoto"/></p>
This seems to solve all the problems, but later I needed to enclose some of this paragraphs inside a <ul>instead of a <p>. The problem being I cannot enclose the <p>tag for the illustration inside a <li>and does not make sense to put the illustration inside a <li>.
这似乎解决了所有问题，但后来我需要将这些段落中的一些包含在 a<ul>而不是 a 中<p>。问题是我无法将<p>插图的标签包含在 a 中，<li>并且将插图放在 a中没有意义<li>。
<ul>
<li>Some text</li>
<p><img src="myphoto"/></p><!--Incorrect-->
<li><img src="myphoto"/></li><!--Does not make sense-->
</ul>
Put the ilulstration inside the same <p>as the text. Then use <br/>tag to move the picture to a new line. I'm not really happy with this workaround, the <br/>is doing presentational stuff that should be better in CSS.
将插图放在与<p>文本相同的内部。然后使用 <br/>tag 将图片移动到新行。我对这个解决方法并不满意，它<br/>正在做一些应该在 CSS 中更好的展示性的东西。
<p>Some text here<br/><img src="myphoto"/></p>
Finally, set the display attribute of the <img>as block in the CSS style sheet. I'm not sure if this is a good way and don't know the unrelated consequences it may have.
最后，<img>在 CSS 样式表中设置as 块的 display 属性。我不确定这是否是一个好方法，也不知道它可能产生的无关后果。
I don't know if there is a standard way of doing this. I have search for CSS to start my image in a new line but did not find it. Any help will be welcome.
我不知道是否有这样做的标准方法。我已经搜索 CSS 以在新行中开始我的图像，但没有找到它。欢迎任何帮助。
回答by ?ime Vidas
Ok, so this is my new solution. Basically, we just set the IMG element to be a block-level element.
好的，这是我的新解决方案。基本上，我们只是将 IMG 元素设置为块级元素。
img { display:block; }
This solution does not introduce any new markup. (You just place the <img>element right after the text in the paragraph / list item.)
此解决方案不会引入任何新标记。（您只需将<img>元素放在段落/列表项中的文本之后即可。）
I believe this to be the most elegant solution, since setting images to be blocks is rather common anyway.
我相信这是最优雅的解决方案，因为无论如何将图像设置为块是相当普遍的。
