CSS从中心开始对齐元素

debugcn 发表于 Dev

EnderCode

我正在尝试从中心一直到顶部和底部对齐bootstrap col中的元素。例子：

如果有一个元素：

    <div class="col-md-3">


     <span> item #1 </span>


     </div>

元素一以中间为中心，上方和下方为空白。推入更多物品时：

当有两个要素时

     <div class="col-md-3">


      <span> item #1 </span>
      <span> item #2 </span>


     </div>

当有三个要素时

     <div class="col-md-3">

      <span> item #1 </span>
      <span> item #2 </span>
      <span> item #3 </span>

     </div>

当有四个要素时

      <div class="col-md-3">

      <span> item #1 </span>
      <span> item #2 </span>
      <span> item #3 </span>
      <span> item #4 </span>

     </div>

不太准确，但类似以下内容-演示：http : //jsfiddle.net/23ktww1o/1/

链接

而不是使用span我在我的例子中使用的列表：

* { margin: 0; padding: 0; }
.col-md-3 {
    min-height: 100px;
    font-size: 0;
    line-height: 100px;
    background: lightblue;
    margin-bottom: 32px;
}

.col-md-3 ul {
    display:inline-block;
    width: 100%;
    margin: 1em 0;
    vertical-align: middle;
    list-style: none;
    line-height: 2.2;
    font-size:16px;
    background: lightgreen;
}
.col-md-3 ul li {
    display: block;
    background: lightyellow;
}

<!-- One item -->
<div class="col-md-3">
    <ul>
        <li>Item</li>
    </ul>
</div>

<!-- Two items -->
<div class="col-md-3">
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

<!-- Multiple items -->
<div class="col-md-3">
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。