div表格定高垂直居中，水平居中
阿新 • • 發佈：2018-12-04
近日做專案，遇到一個難題：就是用div ul li 做表格時，要不就是水平居中不了，要不是垂直居中不來
垂直居中用vertical-align: middle;，但是浮動把它給無效化了
因為定高，所以用不了行高
如何解決垂直居中呢？
就是在li裡面加一個標籤
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> <title></title> </head> <body> <style type="text/css"> ul li{ list-style-type: none; } *{ margin: 0px; padding: 0px; } ul{ width: 99%; height: 100px; border: solid 1px red; } li{ float: left; text-align: center; width: 100%; } p{ height: 100px; vertical-align: middle; /*垂直居中*/ display: table-cell; /*表格化*/ word-break: break-all; /*文字長度達到盒子的寬度後強制換行*/ } </style> <div style="width: 100%;"> <ul> <li><p>鄭玄在馬融門下，三年不得相見，高足弟子傳授而已。嘗算渾天不合，諸弟子莫能解。</p></li> </ul> <ul> <li><p>《文學》</p></li> </ul> </div> </body> </html>
垂直居中解決了，那麼你有沒有看到
text-align: center;是的，因為
display: table-cell;display: block;display: inline;
下圖可以看到，p的寬度，其實
text-align: center;
那麼要如何去弄呢？
我想，如果我把P的寬度跟隨li的寬度變化而變化，那是不是解決水平居中的問題了呢？
我就想到用JS解決
$(function(){
var a=$(".liwidth").innerWidth();
$("li p").css("width",a);
});
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> <title></title> </head> <body> <script type="text/javascript"> //控制 p標籤跟隨li的寬度變化而變化 $(function(){ var a=$(".liwidth").innerWidth(); $("li p").css("width",a); }); </script> <style type="text/css"> ul li{ list-style-type: none; } *{ margin: 0px; padding: 0px; } ul{ width: 99%; height: 100px; border: solid 1px red; } li{ float: left; text-align: center; width: 100%; } p{ height: 100px; display: inline; vertical-align: middle; /*垂直居中*/ display: table-cell; /*表格化*/ word-break: break-all; /*文字長度達到盒子的寬度後強制換行*/ } </style> <div style="width: 100%;"> <ul> <li class="liwidth"><p>鄭玄在馬融門下，三年不得相見，高足弟子傳授而已。嘗算渾天不合，諸弟子莫能解。</p></li> </ul> <ul> <li><p>《文學》</p></li> </ul> </div> </body> </html>
完！