3图像在容器

CSS居中3图像在容器

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

我试图通过111像素对齐3倍的图像是309像素宽，高的容器格内，他们不对准中心，也是第三图像跳下其他两个图像下方。我试图调整容器的宽度和3个的div，我已经试过表和上没有成功的实际HTML改变宽度。

这是我第一次和div一起工作，我认为他们会更容易，也许我的数学在分配宽度时关闭了，或者我只是把它全部错误地结构化了。[这是我的一个例子努力实现，这三个类别中的图片在这里。] http://i49.tinypic.com/2r2uqso.jpg

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

来源

2013-04-07 user2255322

把'float：left'放在三个上面。还去观看CSS-技巧一些截屏，它们会让你的学习过程变得更容易:) – 2013-04-07 20:00:10

谢谢你这么多，虽然我只是做的是，和所有它所做的就是把第一个两个div /图像之间的空间。 – user2255322 2013-04-07 20:05:18

'检查元素'是你的朋友，用它来解决定位问题。我的猜测是你可能需要调整宽度，并摆脱边缘。同样重要的是要知道，浮动元素使'display'属性不相关。 – 2013-04-07 20:08:59

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-07 20:02:34

感谢您的帮助。看起来，第一个div仍然在边上（容器外），第三个div仍然低于另外两个，在我做出这些改变之后。 http://i49.tinypic.com/28mrt4.png看到这里 – user2255322 2013-04-07 20:13:27

认为，如果你的图像具有各309px宽度[3 * 309 = 927px]和具有左填充和右[（2 * 10）* 3 = 60 ）]所有这三个在一起将有一个987px，这是超过960px的宽度。最后一个因缺乏空间而下降。 – pzin 2013-04-07 20:26:57

解决了我的问题，谢谢！ – user2255322 2013-04-08 02:43:31

不要忘了在img标签中添加 'ALT' 属性！对于视力不好或失明的人尤其重要。

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

来源

2013-10-20 11:13:59

3图像在容器

回答

相关问题