具有不固定高度的浮动div的垂直居中内容

Question

我在滑块中有一组浮动的div。在这些div中，我想垂直居中，主要是文本。我试过这样的东西，但它不起作用：

<div class="floated">
  <div class="table">
     <div class"table-cell">
         <p>text</p>
     </div>
 </div>
</div>

.floated{
  float:left;
}

.table{
  display:table;
  vertical-align:middle;
  height:100%;
}

.table-cell{
   display:table-cell;

}

重要提示：我无法设置任何父元素的高度！

Answer 1

.floated { float:left; }
.table { display:table; height:100%; }
.table-cell { display:table-cell; vertical-align:middle; }

<div class="floated">
  <div class="table">
     <div class="table-cell">
         <p>text</p>
     </div>
 </div>
</div>

vertical-align在table-cell not table

上

Answer 2

你错过了＃34; =＆＃34;在这一行<div class"table-cell">

Answer 3

您的div有拼写错误并尝试在表格显示中添加边距

 <div class="floated">
      <div class="table">
         <div class="table-cell">
             <p>text</p>
         </div>
     </div>
    </div>

    .floated{
      float:left;
    }

    .table{
      display:table;
      vertical-align:middle;
      height:100%;
      margin: 0 auto;
    }

    .table-cell{
       display:table-cell;
    }