并排显示2张图像（Css）

Question

我在网页中并排显示2张图片。 我正在尝试在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;
 }

这是显示的内容：

询问您是否可以看到两个图像之间没有空间。 我该如何解决这个问题？

感谢您的时间

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;
 }

小提琴

Answer 3

您可以将display属性设置为inline值，即display=inline ，如果需要，可以给图像留一些边距，这将在它们之间增加空间。 更精确地说，您可以将右图像的margin-left属性设置为所需值，或者将左图像的margin-right属性设置为所需值，以在它们之间添加空间。

Answer 4

对图像使用边距或填充

CSS：

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