并排显示2幅图像（Css）

Question

我在我的网页上并排显示2张图片。我试图在两个图像之间保持一个空间，但我无法做到。我用css并排显示图像。

这是我的Html代码：

 <div id="divCenter">

       <img src="Company Logo.jpg" alt="Company Logo" style="width:150px;height:150px" id="divIDOne"/>

          <%-- Code for the motion image --%>



      <object type="application/x-shockwave-flash" data="animation.swf" width="719" height="174" id="divIDTwo">
      <param name="movie" value="animation.swf" />
      </object>

       </div>

这是我的css代码：

 #divCenter {
    text-align: center;
 }

 #divIDOne {
     margin-right: 200px;
  }

 #divIDTwo {
     margin-left: 300px;
 }

以下是它显示的内容：

问你可以看到2张图片之间没有空格。我该如何解决这个问题？

感谢您的时间

Answer 1

您可以使用padding或margin在两张图片之间获取空间。

#divCenter {
    text-align: center;
}
#divCenter image {
    padding:2px;
    margin:2px;
}

但更好的方法是将图片保存在li或div或td等容器中。

Answer 2

而不是text-align:center;使用margin:0px auto;并指定width和height属性。 试试这个。 HTML

<div id="divCenter">
       <img src="#" alt="Company Logo" style="width:150px;height:150px" id="divIDOne"/>
<!-- <%-- Code for the motion image --%> -->
      <object type="application/x-shockwave-flash" data="animation.swf" width="780" height="174" id="divIDTwo">
      <param name="movie" value="animation.swf" />
      </object>
</div>

CSS

#divCenter {
  margin:0px auto;
  width:960px; 
  height:auto;
  padding:10px;
}

 #divIDOne {
     margin-right: 0px;
 }

 #divIDTwo {
   margin-left: 20px;
 }

Fiddle

Answer 3

您可以将显示属性设置为内嵌值，即display=inline，如果需要，您可以为图像提供一些余量，这将在它们之间添加空格。更准确地说，您可以将右图像的margin-left属性设置为所需的值，或将左图像的margin-right属性设置为所需的值，以便在它们之间添加空格。

Answer 4

为图像使用边距或填充

CSS：

#divCenter
{
     /*display:inline-block;*/ /*if need*/
     width:98%; /*your value*/
}
#divCenter img
{
     margin-right: 10px;     
}