如何将块级元素里面的行内元素垂直居中
<!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>
效果: