CSS 水平对齐图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13468194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS aligning images horizontally
提问by yash
I am new to css and I am trying to align my images horziontally inside a div element.
我是 css 新手，我试图在 div 元素内水平对齐我的图像。
I tried float and display : inline but still they are aligning vertically .
我尝试了 float 和 display: inline 但它们仍然垂直对齐。
#maincontainer {
left : 50px;
top : 80px;
width : 300px;
height : 100px;
border : solid 2px #0f0f0f;
position : absolute;
overflow : scroll;
}
#maincontainer img {
top : 10px;
left : 10px;
width : 80px;
height : 80px;
padding : 10px;
position :relative;
float : left;
}
Please help and tell me if I am wrong smwhere.
请帮助并告诉我我是否错了。
回答by Chris
display: block;
margin-left: auto;
margin-right: auto
回答by Iamowrange
horizontally aligned
html
水平对齐的
html
<div id="maincontainer">
<img />
</div>
css
css
#maincontainer {
width : 300px;
height : 100px;
border : solid 2px #0f0f0f;
}
#maincontainer img {
width : 80px;
height : 80px;
margin:0 auto;
display:block;
background:red;
}?
vertically and horizontally aligned
html
垂直和水平对齐的
html
<div id="maincontainer">
<div><img /></div>
</div> ?
css
css
#maincontainer {
width : 300px;
height : 100px;
border : solid 2px #0f0f0f;
display:table;
}
#maincontainer div img {
width : 80px;
height : 80px;
background:red;
display:inline-block;
}
#maincontainer div{
display:table-cell;
text-align: center;
vertical-align: middle;
}?
just remove background:red from img
只需从 img 中删除背景：红色
回答by thirdender
As long as the parent container is wide enough for the images, they will naturally sit side-by-side. When the row of images becomes too wide for the container, the images will start to wrap down to a new line of text.
只要父容器对于图像来说足够宽，它们自然会并排放置。当图像行变得对于容器来说太宽时，图像将开始换行为新的文本行。
Also, white space (space, tab, and newline characters) will be rendered as a text space between two images. To prevent this, make sure there are no white space characters between the IMGtags.
此外，空白（空格、制表符和换行符）将呈现为两个图像之间的文本空间。为防止出现这种情况，请确保IMG标签之间没有空格字符。
Images can be forced to overflow the parent container's width by setting the CSS white-space: nowrap;on the parent element. This can cause undesired effects if the container gets too narrow, but can also be used to create a horizontal scrollbar by adding overflow: auto;to the containing element.
通过white-space: nowrap;在父元素上设置 CSS ，可以强制图像溢出父容器的宽度。如果容器太窄，这可能会导致不良影响，但也可用于通过添加overflow: auto;到包含元素来创建水平滚动条。
Finally, image tags can have a vertical-alignCSS property. By default it is vertical-align: baseline;. This creates a few pixels of white space beneath the image. You can counter this by setting vertical-align: top;for the image in the CSS.
最后，图像标签可以有一个vertical-alignCSS 属性。默认情况下是vertical-align: baseline;. 这会在图像下方创建几个像素的空白区域。您可以通过vertical-align: top;在 CSS 中设置图像来解决这个问题。
See this fiddlefor some examples with pictures.
有关图片的一些示例，请参阅此小提琴。
回答by SuN
If your div is wide enough to contain all your images in one row, then you can simply try something like this :
如果您的 div 足够宽，可以在一行中包含所有图像，那么您可以简单地尝试以下操作：
#maincontainer img {
float:left;
margin-right:10px;
}
see it live: http://tinkerbin.com/mIBcXNcSThat's the basic code, but it can vary depending on your html code....
现场观看：http: //tinkerbin.com/mIBcXNcS这是基本代码，但它可能因您的 html 代码而异....
回答by Rohit Azad
Hi now Change to your position according to this
嗨，现在根据这个改变你的位置
Now define your parentposition relativeand give to child absolute
现在定义你的父母位置relative并给孩子absolute
#maincontainer {
position : relative;
}
#maincontainer img {
position :absolute;
}
-----
-----
I think u want to this
我想你想要这个
now change some propertiesof your css
现在改变properties你的一些css
and now addthe margin-topand margin-leftremovetopor leftin your parentid maincontainer
现在添加的margin-top和margin-left删除top或left在您的父母id maincontainer
as like this
像这样
#maincontainer {
width : 300px;
height : 100px;
margin-top:80px;
margin-left:50px;
border : solid 2px #0f0f0f;
position : relative;
overflow : scroll;
}
#maincontainer img {
top : 10px;
left : 10px;
width : 80px;
height : 80px;
padding : 10px;
position :absolute;
vertical-align:top;
}
回答by Matanya
- You need to apply
display:block;to the IMG element for floats to work. inline elements cannot be floated. - Alternatively, define IMG as
display:inline-block;, but be aware that this is not supported by older browsers - As a side note, try to avoid as much as you can from defining height in CSS (or use min-height). Unlike the width, the height of many elements, especially a main container, should be flexible.
- 您需要应用
display:block;到 IMG 元素才能使浮动工作。内联元素不能浮动。 - 或者，将 IMG 定义为
display:inline-block;，但请注意，旧浏览器不支持此功能 - 作为旁注，尽量避免在 CSS 中定义高度（或使用 min-height）。与宽度不同，许多元素的高度，尤其是主容器，应该是灵活的。
