如何将块级元素里面的行内元素垂直居中 

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - Simple Data</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        #big{
            width:100%;
            height:40px;
            line-height:40px;
            background-color:pink;
        }
        #big::before{
            content:"";
            display:inline-block;
            height:100%;
            vertical-align:middle;
        }
    </style>
 </HEAD>
<BODY>
    <div id="big">
        <input />
    </div>
</BODY>
</HTML>

　　

　　　　

 

 

 

 

例子二：

ul的li里面的文字需要垂直居中，给了line-height可以解决问题，但是因为li中的文本过长，需要换行，这时候就有问题了

 

 解决办法：

1、将文字用一个span的标签包起来，给span元素设置样式

 ul>li>span{
     display:inline-block;
     vertical-align: middle;
 }

2、在li中用伪元素befor在前面追加一个空的元素，并设置下面的样式（注意一个都不能少）

ul>li::before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align: middle;
}

3、然后给li设置样式换行即可  word-break:nomal;

完整的代码如下：

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
        table{
            border-right:1px solid #ddd;
            border-top:1px solid #ddd;
            border-collapse: collapse;
        }
        table td{
            text-align:center;
            border-left:1px solid #ddd;
            border-bottom:1px solid #ddd;
        }
        #dd>div{
            float:left;
        }
        ul{
            margin:0;
            padding:0;
            overflow:hidden;
            width:300px;
            border-top:1px solid #ddd;
            border-left:1px solid #ddd;
        }
        ul>li{
            text-align: center;
            list-style: none;
            float:left;
            width:65px;
            height:20px;
            border-right:1px solid #ddd;
            border-bottom:1px solid #ddd;
            background-color:pink;
            word-break: normal;
        }
        ul>li::before{
            content:'';
            display:inline-block;
            height:100%;
            vertical-align: middle;
        }
         ul>li>span{
             display:inline-block;
             vertical-align: middle;
         }
  </style>
 </head>
 <body>
    <ul>
        <li style="width:100px;height:104px"><span>我的就是我的我的就是我的</span></li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>3</li>
        <li>4</li>
        <li>4</li>
        <li>4</li>
        <li>4</li>
 
    </ul>
 </body>
</html>

 效果：

 

posted @ 2018-03-01 14:50  人在路途  阅读(936)  评论(0)    收藏  举报