0

複数の画像を同じ行に表示し、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/

4

2 に答える 2

3

次のようなものが機能します。

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

デモ

また

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

デモ

(フロートの後、おそらくclearfixを適用したいと思うでしょう)

于 2013-10-28T22:15:59.277 に答える
1

あなたのフィドルを編集しましたhttp://jsfiddle.net/24m7L/1/

どこでも ID をコピーしている場合は、クラスを試して使用してください。

これは、IE <= 7 ( http://caniuse.com/inline-block )inline-blockが正しく動作していないものを使用します。

于 2013-10-28T22:12:35.597 に答える