2

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 的宽度，但没有成功。

这是我第一次使用 div，我认为它们会更容易，也许我的数学在分配宽度时是关闭的，或者我只是把它的结构都错了。！[这是我想要实现的一个例子，图片中的三个类别在这里。] http://i49.tinypic.com/2r2uqso.jpg

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

4

3 回答 3

9

Don't forget to add 'alt' attribute in the img tag! It is especially important for people who a partially sighted or blind.

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

于 2013-10-20T11:13:59.280 回答
8

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>
于 2013-04-07T20:02:34.047 回答
1

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.

于 2018-08-09T19:38:47.810 回答