Question

我有一个像菜单一样的div列表，我想把它们放在其中。如果它们没有漂浮，它就可以工作，但是一旦我漂浮它们，它就不再是中心了。知道为什么以及如何解决这个问题？

＆＃13;

#panel {
  display: table-cell;
  vertical-align: middle;
  width: 40%;
  float: left;
  background-color: yellow;
  height: 80px;
  
}
span {
  background-color: green;
}

＆＃13;

<div id="panel"><span>Some caption  </span>
</div>
<div id="panel"><span>Some caption </span>
</div>

＆＃13;

Answer 1

请尝试以下操作： demo

CSS：

#panel {
    display: block;
    width: 40%;
    float: left;
    background-color: yellow;
    height: 80px;
    line-height: 80px;
    vertical-align: middle;
    /* tall height for emphasis */
}
span {
    background-color: green;
    display: table-cell;
    vertical-align: middle;
}

更新：如果您不需要全高，可以这样使用： Demo

CSS：

#panel {
    display: block;
    width: 40%;
    float: left;
    background-color: yellow;
    height: 80px;
    line-height: 80px;
    vertical-align: middle;
    /* tall height for emphasis */
}
span {
    background-color: green;
    display: inline-block;
    vertical-align: middle;
    line-height:30px;
}

Answer 2

#panel {
  display: table-cell;
  vertical-align: middle;
  width: 40%;
  float: left;
  background-color: yellow;
  height: 80px;
  /* tall height for emphasis */
}
span {
  float:left;
  margin-top:13%;
  background-color: green;
}

<div id="panel"><span>Some caption  </span>
</div>
<div id="panel"><span>Some caption </span>
</div>

浮动div内的垂直中心跨度

2 个答案: