並排顯示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;     
}