Question

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

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

我想在容器div内对齐3张图像，这些图像宽309像素，高111像素，并且它们不对齐中心，第三个图像也会跳到其他两个图像下方。我试图调整容器的宽度和3个div，我已经尝试过表格并改变实际html的宽度但没有成功。

这是我第一次使用divs，我认为它们会更容易，也许我的数学在分配宽度时是关闭的，或者我只是将它构造成全部错误。！[这里是我正在尝试的一个例子实现，图中的三个类别。] http://i49.tinypic.com/2r2uqso.jpg

任何所有的帮助将不胜感激。

Answer 1

CSS

.contain {
    max-width:960px;
    text-align:center;
}

.category {
   position:relative;
   display: inline-block;
   float:left;
   padding:10px;
}

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>

Answer 2

不要忘记在img标签中添加'alt'属性！对于视力不佳或失明的人来说尤为重要。

http://www.myblogsplace.com/images-alt-text

Answer 3

是的，alt属性非常重要。它实际上是由“屏幕阅读器”软件使用的，因此当一个人在听网页的内容时，例如盲人，可以与该特定元素进行交互。所有图像都应具有此属性，以便可以访问。

连续3个图像以容器为中心

3 个答案: