html - 使用描述符水平内联图像

Question

HTML/CSS:我试图将一组图像放在网页的水平行中。

当我在每张图片下方引入文本描述符时遇到问题。结果是，当描述符大到需要换行时，特定图像会向上移动一点。

我已经在 jsfiddle 中进行了设置:

http://jsfiddle.net/mapbpk/8Rq5N/

这是 html/css 代码:

<div class = "pNmPicContainer" id = "Picture" >
                <h3 class="clearFloat"><center><strong>Picture Palette</strong></center></h3>

    <div class = "pNmPicImageSlot" id="picSlot_0" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - rear.jpg"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="Oak House - rear.jpg"
                                title="Oak House - rear.jpg" class = "drag" id = "dropObj_1"/>
                    <br>Back Garden

    </div>  <!-- pNmPicImageSlot -->



    <div class = "pNmPicImageSlot" id="picSlot_1" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - dining room.jpg"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="Oak House - dining room.jpg"
                                title="Oak House - dining room.jpg" class = "drag" id = "dropObj_2"/>
                    <br>Dining Room

    </div>  <!-- pNmPicImageSlot -->



    <div class = "pNmPicImageSlot" id="picSlot_2" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/OakHouse-Garden.jpg"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="OakHouse-Garden.jpg"
                                title="OakHouse-Garden.jpg" class = "drag" id = "dropObj_3"/>
                    <br>Large Garden

    </div>  <!-- pNmPicImageSlot -->



    <div class = "pNmPicImageSlot" id="picSlot_3" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - Lounge.jpg"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="Oak House - Lounge.jpg"
                                title="Oak House - Lounge.jpg" class = "drag" id = "dropObj_4"/>
                    <br>Very Very Very Spacious Living Room

    </div>  <!-- pNmPicImageSlot -->



    <div class = "pNmPicImageSlot" id="picSlot_4" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/OH Bed 01.JPG"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="OH Bed 01.JPG"
                                title="OH Bed 01.JPG" class = "drag" id = "dropObj_5"/>
                    <br>Main Bedroom

    </div>  <!-- pNmPicImageSlot -->



    <div class = "pNmPicImageSlot" id="picSlot_5" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - Bed 2.jpg"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="Oak House - Bed 2.jpg"
                                title="Oak House - Bed 2.jpg" class = "drag" id = "dropObj_6"/>
                    <br>Bedroom 2

    </div>  <!-- pNmPicImageSlot -->



    <div class = "pNmPicImageSlot" id="picSlot_6" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - bed 3.jpg"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="Oak House - bed 3.jpg"
                                title="Oak House - bed 3.jpg" class = "drag" id = "dropObj_7"/>
                    <br>Bedroom 3

    </div>  <!-- pNmPicImageSlot -->



    <div class = "pNmPicImageSlot" id="picSlot_7" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - conservatory.jpg"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="Oak House - conservatory.jpg"
                                title="Oak House - conservatory.jpg" class = "drag" id = "dropObj_8"/>
                    <br>Conservatory

    </div>  <!-- pNmPicImageSlot -->



    <div class = "pNmPicImageSlot" id="picSlot_8" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - lawn.jpg"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="Oak House - lawn.jpg"
                                title="Oak House - lawn.jpg" class = "drag" id = "dropObj_9"/>
                    <br>Elegant Lawn

    </div>  <!-- pNmPicImageSlot -->



    <div class = "pNmPicImageSlot" id="picSlot_9" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - Front.jpg"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="Oak House - Front.jpg"
                                title="Oak House - Front.jpg" class = "drag" id = "dropObj_10"/>
                    <br>Driveway

    </div>  <!-- pNmPicImageSlot -->



    <div class = "pNmPicImageSlot" id="picSlot_10" 
                            style="width:145px; height:100px">

                            <img src="http://localhost:9000/HomeVu1//HomeVu1/Pictures/Oak House - front 2.jpg"
                                width="56.700000751018464"
                                height="37.800000500678976"
                                alt="Oak House - front 2.jpg"
                                title="Oak House - front 2.jpg" class = "drag" id = "dropObj_11"/>
                    <br>Front Garden

    </div>  <!-- pNmPicImageSlot -->


                     </div>

CSS:

.pNmPicContainer, .pNmVidContainer /* MAK */
{
    background-color: #f0fff0;
    /* background-image: url(../images/skin/database_add.png); */
    /* background-repeat:repeat-x; */
        padding: 1em 1em 1em 1em;
    margin: 1em 1em 1em 1em;  
    width:auto; text-align:center; display:block;   
} 

.pNmPicImage /* MAK */
{
font-size: 0.6em;
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:5px;
background-color: transparent;
border-color: transparent;
padding: 1em 1em 1em 1em;
}

.pNmPicImageSlot , .pNmVidImageSlot
{
/* float:left; */
padding: 5px;

text-transform: none;
letter-spacing: normal;
/* padding: .3em .1em .2em .1em; */
display:inline-block;
/* background-image: url(../images/skin/Film0314.png); */

background-color:#a4dded
;



}

欢迎您提出建议？

-迈克

Answer 1

display: inline-block 属性使 HTML 空间敏感。将“vertical-align: top”添加到您的 pNmPicImageSlot 样式以修复它。

.pNmPicImageSlot , .pNmVidImageSlot {
    /* float:left; */
    padding: 5px;

    text-transform: none;
    letter-spacing: normal;
    /* padding: .3em .1em .2em .1em; */
    display:inline-block;
    vertical-align: top;
    /* background-image: url(../images/skin/Film0314.png); */

    background-color:#a4dded;
}