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

Posted 2023-03-05

【中文标题】连续 3 张图像以容器为中心

【英文标题】：3 images in a row centered in container

【发布时间】：2013-03-29 19:51:24

【问题描述】：

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

任何 我们将不胜感激。

【问题讨论】：

将float: left 放在所有三个上。还可以观看一些关于 CSS-Tricks 的截屏视频，它们会让你的学习过程更轻松 :)

非常感谢，虽然我只是这样做了，它所做的只是在前两个 div/图像之间放置空间。

'Inspect Element' 是你的朋友，用它来解决定位问题。我的猜测是你可能需要调整宽度，并摆脱那个边距。同样重要的是要知道浮动元素会使display 属性无关紧要。

align 属性为deprecated in HTML4.1 和not supported in HTML5。

【参考方案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>

【讨论】：

感谢您的帮助。在我进行这些更改之后，第一个 div 似乎仍然在侧面（容器外），第三个 div 仍然在其他两个下方。 i49.tinypic.com/28mrt4.png 看这里

想想如果你的图片有每个 309px 的宽度 [3*309=927px] 并且左右两边都有一个填充 [(2*10)*3=60)] 这三个一起会有一个宽度987px，大于 960px。最后一个由于空间不足而下降。

【参考方案2】：

不要忘记在 img 标签中添加 'alt' 属性！这对于部分失明或失明的人尤其重要。

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

【参考方案3】：

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