Question

我有以下设置

HTML

<div id="wrap">
    <div id="box1" class="list"></div>
    <div id="box2" class="list"></div>
    <div id="box3" class="list"></div>
    <div id="box4" class="list"></div>
    <div id="box5" class="list"></div>
    <div id="box6" class="list"></div>
    <div id="box5" class="list"></div>
    <div id="box3" class="list"></div>
    <div id="box1" class="list"></div>
    <div id="box4" class="list"></div>
    <div id="box6" class="list"></div>
    <div id="box2" class="list"></div>
</div>

CSS

#wrap{margin: 0 auto; text-align: center; vertical-align: middle; border: 1px solid #000000;}
.list{display: inline-block;margin: 0px 10px;}

#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;}
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;}
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;}
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;}
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;}
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}

fiddle

每个<div class="list">实际上会保存一个图像但是为了这个目的，我设置宽度和高度为div的高，如果图像在那里。是的，我离开了重复的id，但实际上这些div不会有id，只是班级。

无论如何，我试图让这些div垂直对齐每一行。垂直对齐需要是动态的，如果从一条线上移除最高的盒子（即#box3）（因为重新调整大小的窗口将其移动到另一条线或者它从一起被移除） HTML）该行应相应调整（ge。如果#box3和#box5位于同一行，其他行几乎触及#box3边框，当所有#box3被删除时行现在几乎应该触及#box5边框）

正如您所看到的，我已经在使用垂直对齐而无济于事。那么我还需要其他什么CSS？

Answer 1

只需将vertical-align设置为元素本身而不是包装器。

<强> CSS

#wrap{margin: 0 auto; text-align: center; border: 1px solid #000000; }
.list{display: inline-block;margin: 0px 10px; vertical-align: middle;}

请参阅DEMO

Answer 2

如果你对flexbox的当前浏览器支持没问题，你可以使用flexbox来达到预期的效果。

使用flexbox可以在每行中水平分布图像，并在垂直中心对齐它们。

＆＃13;

/* Flex container */
.container{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
/* Each div inside container */
.container div{
  align-self: center;
  margin:20px;
}

#box1{border: 1px solid #000000; background-color:#FF0000; width: 121px; height:36px;}
#box2{border: 1px solid #000000; background-color:#00FF00; width: 125px; height:39px;}
#box3{border: 1px solid #000000; background-color:#0000FF; width: 185px; height:52px;}
#box4{border: 1px solid #000000; background-color:#FFFF00; width: 183px; height:26px;}
#box5{border: 1px solid #000000; background-color:#FF00FF; width: 105px; height:44px;}
#box6{border: 1px solid #000000; background-color:#00FFFF; width: 170px; height:34px;}

＆＃13;

<div class="container">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
  <div id="box5"></div>
  <div id="box6"></div>
  <div id="box5"></div>
  <div id="box3"></div>
  <div id="box1"></div>
  <div id="box4"></div>
  <div id="box6"></div>
  <div id="box2"></div>
</div>

＆＃13;

Answer 3

#wrap{
   margin: 0 auto;
   text-align: center;
   border: 1px solid #000000;
}
.list{
   display: inline-block;
   margin: 0px 10px;
   vartical-align: middle;
}

请尝试在.list类中进行vartical-align middle ....

这是工作吗？

如何垂直对齐不同高度的div？

3 个答案: