浮动元素上下居中问题

发布于
2017-09-21

html:

<!DOCTYPE>
<html>
  <head>          
    <title>test</title>
  </head>
<body>
    <div class="clearfix">
        <p class="left">我是测试数据1</p>
        <p class="left">我是测试数据2<br/>我是测试数据2</p>
        <p class="left">我是测试数据3<br/>我是测试数据3<br/>我是测试数据3</p>
    </div>
</body>
</html>

css:

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

.left{
    float:left;
}
div{
  display:table;
}
div p{
  border:1px solid #000;
  display:table-cell;
  vertical-align:middle;
}

我想要display:table-cell; vertical-align:middle;实现元素的上下居中，为什么实现不了？

css html

阅读 3.3k

2 个回答

得票最新