Question

我正在尝试将引导列中的元素从中心开始一直到顶部和底部。例如：

当有一个元素时：

    <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/

Answer 1

制作"p002" s span;
使用display: block和span

div

display: table-cell

示例：

vertical-align: middle

div.col-xs-3 { height: 240px; display: table} div.cell { display: table-cell; vertical-align: middle; height: 100%; border: 1px solid gray; } span { display: block; }

编辑:(基于op的评论）

为了让<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-3"> <div class="cell"> <span> item #1 </span> <span> item #2 </span> </div> </div> <div class="col-xs-9"> <span> item #1 </span> <span> item #2 </span> <span> item #2 </span> <span> item #2 </span> </div> </div>占据父级的高度，请将其div和100%设为父级。您也可以在display: table row上设置高度，并在内部div设置100%。

Answer 2

如果您尝试将其垂直对齐，请使用该课程

 <div class="col-md-3" style="vertical-align:middle">


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


 </div>

否则你可以在div上使用文本中心

Answer 3

我没有使用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>

Answer 4

您可以使用灵活的盒子解决方案。只需要添加下面的CSS代码。 代码在评论中解释

<强> CSS

.container-flex {
  display: flex;
  flex-direction: column; /* Vertically stacking */
  justify-content: center; /* Vertical alignment */
  align-items: center; /* Needed only if you want to limit the width */
  height: 300px;
}

.item {
  margin: 10px 0;
}

为SO片段演示修改了代码。

<强>输出：

＆＃13;

// jQuery added for testing the vertical alignment

var i = 0;
var newItem = "<div class=\"item\">item</div>";

$('.hide-item').click(function() {
  $('.container-flex').find(':first-child').remove();
});

$('.add-item').click(function() {
  $('.container-flex').append(newItem);
});

＆＃13;

.container-flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: 300px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.item {
  background: #3f51b5 none repeat scroll 0 0;
  padding: 10px;
  color: #fff;
  margin: 10px 0;
  display: flex;
  align-items: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-3 container-flex">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>
<br>
<button class="btn hide-item center-block">Hide item</button>
<br>
<button class="btn add-item center-block">Add item</button>

＆＃13;

CSS从中心开始对齐元素

4 个答案: