Html 以容器为中心的连续 3 个图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15867113/
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
3 images in a row centered in container
提问by user2255322
CSS
CSS
.contain {
max-width:960px;
text-align:center;
}
.category {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
.category2 {
position:relative;
display: inline-block;
pading:10px;
}
.category3 {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}
HTML
HTML
<div align="center" class="category">
<img src="gemstoneshomebutton.png" />
</div>
<div align="center" class="category2">
<img src="dichroichomebutton.png" />
</div>
<div align="center" class="category3">
<img src="filigreehomebutton.png" />
</div>
i am trying to align 3 images that are 309 px wide , by 111 px high inside a container div, and they don't align center and also the third image jumps down below the other two images. I've tried to adjust the width of the container and the 3 divs, I've tried tables and changing the width on the actual html with no success.
我正在尝试将 3 个宽 309 像素、高 111 像素的图像在容器 div 内对齐，并且它们不对齐中心，并且第三个图像跳到其他两个图像下方。我尝试调整容器和 3 个 div 的宽度，我尝试过表格并更改实际 html 的宽度但没有成功。
This is my first time working with divs and i thought they would be easier, perhaps my math is off when assigning widths, or maybe I'm just structuring it all wrong.![here is an example of what i am trying to achieve, the three categories in the picture here.] http://i49.tinypic.com/2r2uqso.jpg
这是我第一次使用 div，我认为它们会更容易，也许我的数学在分配宽度时关闭了，或者我只是构造错误。！[这是我想要实现的一个例子，此处图片中的三个类别。] http://i49.tinypic.com/2r2uqso.jpg
any and all help would be appreciated.
任何和所有帮助将不胜感激。
回答by
CSS
CSS
.contain {
max-width:960px;
text-align:center;
}
.category {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
HTML
HTML
<div align="center" class="category">
<img src="gemstoneshomebutton.png" />
</div>
<div align="center" class="category">
<img src="dichroichomebutton.png" />
</div>
<div align="center" class="category">
<img src="filigreehomebutton.png" />
</div>
回答by John Churchley
Don't forget to add 'alt' attribute in the img tag! It is especially important for people who a partially sighted or blind.
不要忘记在 img 标签中添加 'alt' 属性！这对于部分视力或失明的人尤其重要。
回答by JaneDoe
Yes the alt attribute is really important. It is actually used by "screen reader" software so when a person is listening to the content of a webpage, like a blind person, can interact with that specific element. All images should have this attribute so it is accessible.
是的，alt 属性非常重要。它实际上是由“屏幕阅读器”软件使用的，因此当一个人在听网页内容时，就像一个盲人，可以与该特定元素进行交互。所有图像都应具有此属性，以便可以访问。
