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
;
}
欢迎您的建议？
-Mike
答案 0 :(得分：1)
display：inline-block属性使HTML空间敏感。 添加＆＃39; vertical-align：top＆＃39;到你的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;
}