Question

如何在同一行显示多个图像，并使用HTML / CSS将标题置于每个图像的中心？

以下是我目前的情况：

HTML：

<div class="iconbox">
       <div id="tut-icon"><p><img src="images/tuticon.png" alt="Written Tutorials" />Some text</p></div>
       <div id="vid-icon"><p><img src="images/vidicon.png" alt="Video Tutorials" />Some text</p></div>
       <div id="add-icon"><p><img src="images/addtuticon.png" alt="Add Tutorials" />Some text</p></div>
</div>

CSS：

.iconbox {
height: 128px;
padding: 20px;
display: inline;
}

#tut-icon, #vid-icon, #add-icon {
text-align: center;
width: 128px;
}

#tut-icon img, #vid-icon img, #add-icon img {
display: inline-block;
}

这是代码的JSFiddle：http://jsfiddle.net/swiftsly/24m7L/

Answer 1

这样的事情会起作用：

HTML：

<div class="iconbox">
    <div id="tut-icon">
        <img src="images/tuticon.png" alt="Written Tutorials" />
        <p>Some text</p>
    </div>
    <div id="vid-icon">
        <img src="images/vidicon.png" alt="Video Tutorials" />
        <p>Some text</p>
    </div>
    <div id="add-icon">
        <img src="images/addtuticon.png" alt="Add Tutorials" />
        <p>Some text</p>
    </div>
</div>

CSS：

.iconbox {
    height: 128px;
    padding: 20px;
}
.iconbox > div {
    text-align: center;
    width: 128px;
    display: inline-block;
}
.iconbox p {
    margin: 0;
}

DEMO

或

.iconbox {
    height: 128px;
    padding: 20px;
}
.iconbox > div {
    text-align: center;
    width: 128px;
    float: left;
}
.iconbox p {
    margin: 0;
}

DEMO

（在浮动之后你可能想要应用clearfix）

Answer 2

编辑你的小提琴http://jsfiddle.net/24m7L/1/

如果您发现自己在任何地方复制ID，请尝试使用类。

这使用inline-block无法正常工作IE＆lt; = 7（http://caniuse.com/inline-block）

带有字幕的内嵌图像位于每个下方？

2 个答案:

DEMO

DEMO