HTML - 将图像放在新行中

Question

我有一系列段落.每一个都以一个说明结束,阐明了该段中解释的主题.

我希望插图在一个新的行上,而不是与文本一起显示,我找到了以下解决方案,它有自己的问题:

将插图放在与插图相关的文本不同的<p>中.

<p>Some text here<p/>
<p><img src="myphoto"/></p>

这似乎解决了所有问题,但后来我需要将一些段落包含在一个<ul>而不是一个中<p>.问题是我无法将<p>插图中的插图包含在内部,<li>并且将插图放入其中是没有意义的<li>.

<ul>
    <li>Some text</li>
    <p><img src="myphoto"/></p><!--Incorrect-->
    <li><img src="myphoto"/></li><!--Does not make sense-->
</ul>

将ilulstration放在与<p>文本相同的内部.然后使用 <br/>标签将图片移动到新行.我不是这种解决方法真的很开心,在<br/>做表象的东西,应该是在CSS更好.

<p>Some text here<br/><img src="myphoto"/></p>

最后,设置显示属性 <img>在CSS样式表中 as块.我不确定这是不是一个好方法,也不知道它可能带来的无关后果.

我不知道是否有一种标准的方法可以做到这一点.我已经搜索了CSS以在新行中启动我的图像但是没有找到它.欢迎任何帮助.

Answer 1

好的,这是我的新解决方案.基本上,我们只是将IMG元素设置为块级元素.

img { display:block; }  

此解决方案不会引入任何新标记.(你只需要放置<img>元素放在段落/列表项中的文本后面.)

我相信这是最优雅的解决方案,因为无论如何将图像设置为块是相当普遍的.