Question

我在一个盒子里有三张图片。如何在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;
}

Answer 1

您可以使用<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;;

工作演示 - ＆gt; CLICK HERE

Answer 2

将高度设置为100％，因此边框将位于图像的末尾。

Answer 3

将此代码包含在样式中：

img {
   margin: 0px auto;
}

或

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

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

如何垂直对齐几个图像css？

4 个答案: