Question

我使用以下代码在网页中间显示两个圆圈。圆圈不会出现在屏幕的中央。任何人都可以请指导我为什么会这样？谢谢。 Fiddle

<div style="background-color: orange; width: 900px; margin: 0 auto;">
    <img class=" wp-image-2531 alignleft" style="clear: none;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-beneficiaries.png" alt="meet beneficiaries" width="220" height="218" /><span style="text-decoration: underline;">
    <img class="alignnone wp-image-2533" style="clear: none; margin-left: 400px;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-clients.png" alt="meet clients" width="219" height="217" /></span>
</div>

Answer 1

删除imgs上的边距和填充，并在父级上添加text-align center，你不需要clear: none;

＆＃13;

<div style="background-color: orange; width: 900px; margin: 0 auto;text-align: center;">
    <img class=" wp-image-2531 alignleft" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-beneficiaries.png" alt="meet beneficiaries" width="220" height="218" /><span style="text-decoration: underline;">
    <img class="alignnone wp-image-2533" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-clients.png" alt="meet clients" width="219" height="217" /></span>
</div>

＆＃13;

重要提示：

内联样式是一种不好的做法。您应该在.css文件中添加样式。

Answer 2

删除图像上的边距，并在div上将边距设置为50％。

<div style="background-color: orange; width: 900px; margin: 50%; padding-left:500px;">
<img class=" wp-image-2531 alignleft" style="clear: none;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-beneficiaries.png" alt="meet beneficiaries" width="220" height="218" /><span style="text-decoration: underline;">
<img class="alignnone wp-image-2533" style="clear: none;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/meet-clients.png" alt="meet clients" width="219" height="217" /></span>

图像未显示在网页中心

2 个答案: