Question

当他们是dinamic（循环的一部分）时，我如何将.tag_closet div置于中间位置？有时候我有2个.tag_closet divs，有时候更多的是在所有情况下都有一种方法可以居中到所有div？现在他们都开始从顶部出现。我希望结果如下：example

＆＃13;

.closet_border {background:lightgray;height:100px;width:300px;clear:both}
.tag_closet  {
  
  background: #df1b57 none repeat scroll 0 0;
    border-radius: 5px;
    box-shadow: 1px 1px 1px 1px lightgray;
    color: white;
    float: left;
    font-size: 11px;
    height: 20px;
    line-height: 11px;
    margin-bottom: 1px;
    margin-right: 8px;
    margin-top: 3px;
    padding: 4px;
    
}

＆＃13;

<div  class="closet_border"> <div class="tag_closet">1 Calçao</div>   <div class="tag_closet">1 JumpSuit</div>
<div class="tag_closet">1 JumpSuit</div><div class="tag_closet">1 JumpSuit</div><div class="tag_closet">1 JumpSuit</div>
</div>

＆＃13;

Answer 1

这是一种方法，我添加了一个包装器

.closet_wrapper {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

示例代码段

.closet_border {background:lightgray;height:100px;width:300px;clear:both}
.tag_closet  {
  background: #df1b57 none repeat scroll 0 0;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px lightgray;
  color: white;
  float: left;
  font-size: 11px;
  height: 20px;
  line-height: 11px;
  margin-bottom: 1px;
  margin-right: 8px;
  margin-top: 3px;
  padding: 4px;
}
.closet_wrapper {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div  class="closet_border">
  <div  class="closet_wrapper">
    <div class="tag_closet">1 Calçao</div>
    <div class="tag_closet">1 JumpSuit</div>
    <div class="tag_closet">1 JumpSuit</div>
    <div class="tag_closet">1 JumpSuit</div>
    <div class="tag_closet">1 JumpSuit</div>
  </div>
</div>

这是另一个，使用display: table

.closet_border {background:lightgray;height:100px;width:300px;clear:both
    display: table;
}
.tag_closet  {
  background: #df1b57 none repeat scroll 0 0;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px lightgray;
  color: white;
  font-size: 11px;
  height: 20px;
  line-height: 11px;
  margin-bottom: 1px;
  margin-right: 8px;
  margin-top: 3px;
  padding: 4px;
  display: inline-block;
}
.closet_wrapper {
  display: table-cell;
  height: inherit;
  vertical-align: middle;
}

<div  class="closet_border">
  <div  class="closet_wrapper">
    <div class="tag_closet">1 Calçao</div>
    <div class="tag_closet">1 JumpSuit</div>
    <div class="tag_closet">1 JumpSuit</div>
    <div class="tag_closet">1 JumpSuit</div>
    <div class="tag_closet">1 JumpSuit</div>
  </div>
</div>

Answer 2

如果您不需要支持IE9及更早版本，我建议您使用flexbox模式。

试试这个：

.closet_border {
  background: lightgray;
  height: 100px;
  width: 300px;
  clear: both;

  /* flex container */
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap; /* force child items to line break */
  justify-content: center; /* child elements horizontally centered */
  align-content: center; /* concentrate child elements in the vertical center of container */
  align-items: center; /* child elements vertically centered */
}

.tag_closet {
  background: #df1b57;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px lightgray; /* why this? */
  color: white;
  /*float: left;*/ /* you don't need this with display flex */
  font-size: 11px;
  height: 20px;
  line-height: 20px; /*11px*/
  margin: 3px 4px; /* better use of margin */
  padding: 4px;

  /* flex items */
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}

希望它有所帮助！

Answer 3

检查codepen.io 希望它有所帮助！

＆＃13;

.closet_border {
  background: lightgray;
  height: 100px;
  width: 300px;
  clear: both;
}

.tag_closet {
  background: #df1b57 none repeat scroll 0 0;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 1px lightgray;
  color: white;
  display: inline-block;
  font-size: 11px;
  height: 20px;
  line-height: 11px;
  margin-bottom: 1px;
  margin-right: 8px;
  margin-top: 3px;
  padding: 4px;
}

table,
tr,
td {
  vertical-align: middle;
  text-align: center;
  height: 100%;
}

＆＃13;

<html>
  <body>
    <div class="closet_border">
      <table>
        <tr>
          <td>
            <div class="tag_closet">1 Calçao</div>
            <div class="tag_closet">1 JumpSuit</div>
            <div class="tag_closet">1 JumpSuit</div>
            <div class="tag_closet">1 JumpSuit</div>
            <div class="tag_closet">1 JumpSuit</div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

＆＃13;

在所有情况下都以div为中心

3 个答案: