如何垂直对齐多个图像css？答案

【问题标题】：How to vertically align several images css?如何垂直对齐多个图像css？
【发布时间】：2014-02-09 14:41:29
【问题描述】：

我在一个盒子里放了三张图片。如何在 css 中对齐它们，以便它们之间以及框的顶部和底部边框之间有均匀的空间？

目前我的代码如下所示：

<div id="topRight">
    <img src="image1.jpg" width="300px">
    <img src="image2.jpg" width="300px">
    <img src="image3.jpg" width="300px">
</div>

还有css：

#topRight {
float: right;
margin-top: 200px;
width: 300px;
height: 630px;
padding-top: 10px;
background-color: white;
padding-left: 10px;
padding-right: 10px;
box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
border-radius: 20px;
border: 1px solid #00BFFF;
}

【问题讨论】：

标签： html css alignment

【解决方案1】：

将高度设置为 100%，这样边框将位于图像的末尾。

【讨论】：

【解决方案2】：

将此代码包含在样式中：

img {
   margin: 0px auto;
}

或

img {
   margin: 10px;
   position :relative;
   display: block;
}

【讨论】：

【解决方案3】：

您可以使用<ul>...</ul>垂直显示图像

每张图片都放入一个<li>标签！

<ul id="topRight">
    <li><img src="image1.jpg" width="100px"></li>
    <li><img src="image2.jpg" width="100px"></li>
    <li><img src="image3.jpg" width="100px"></li>
</ul>

然后使用list-style:none;删除子弹

margin:value 0; 可用于提供等间距。

现在可以使用padding:value;添加额外的等间距

对于垂直间距单独使用padding:value 0;;

工作演示 -> CLICK HERE

【讨论】：

我已经对一个列表进行了elseware的样式化，那么如何在css中专门引用这个图像列表（避免影响其他列表的样式）？
这就是我们在这种情况下使用选择器（即 id）的原因，topRight .. 这样其他<ul> 就不会受到影响！更新了 Fiddle Demo .. 看看

【解决方案4】：

jsFiddle

#topRight {
  padding-top:10px;
  padding-left:10px;
  padding-right:10px;
  width: 300px;
  height: 100%;
  background-color: white;
  box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
  border-radius: 20px;
  border: 1px solid #00BFFF;
}

img {
  padding-bottom:10px;
  vertical-align:top;
}

【讨论】：