[英]Displaying 2 images side by side with space (Css)
I am displaying 2 images side by side in my webpage. 我在网页中并排显示2张图片。 I am trying to keep a space in between the 2 images but i am unable to do it. 我正在尝试在2张图片之间保持空白,但我无法做到。 I have used css to display the images side by side. 我使用CSS并排显示图像。
Here is my Html Code : 这是我的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>
Here is my css code : 这是我的CSS代码:
#divCenter {
text-align: center;
}
#divIDOne {
margin-right: 200px;
}
#divIDTwo {
margin-left: 300px;
}
Here is what it displays : 这是显示的内容:
Ask you can see there is no space between the 2 images. 询问您是否可以看到两个图像之间没有空间。 How do i solve this problem? 我该如何解决这个问题?
Thank you for your time 感谢您的时间
You can use padding
or margin
to get space between two Images. 您可以使用padding
或margin
在两个图像之间获取空间。
#divCenter {
text-align: center;
}
#divCenter image {
padding:2px;
margin:2px;
}
But better approach is to keep the images in a container like li
or div
or td
. 但是更好的方法是将图像保存在li
或div
或td
类的容器中。
Instead of text-align:center;
而不是text-align:center;
use margin:0px auto;
使用margin:0px auto;
and specify width and height property. 并指定width和height属性。 Try this. 尝试这个。 HTML 的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 的CSS
#divCenter {
margin:0px auto;
width:960px;
height:auto;
padding:10px;
}
#divIDOne {
margin-right: 0px;
}
#divIDTwo {
margin-left: 20px;
}
You can set the display property to the inline value ie display=inline
and if required you can give some margin for the images this will add space between them. 您可以将display属性设置为inline值,即display=inline
,如果需要,可以给图像留一些边距,这将在它们之间增加空间。 To be more precise you can set the margin-left
property of the right image to desired value or the margin-right
property of the left image to the desired value to add space between them . 更精确地说,您可以将右图像的margin-left
属性设置为所需值,或者将左图像的margin-right
属性设置为所需值,以在它们之间添加空间。
Use margin or padding for image 对图像使用边距或填充
CSS: CSS:
#divCenter
{
/*display:inline-block;*/ /*if need*/
width:98%; /*your value*/
}
#divCenter img
{
margin-right: 10px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.