单元格居中的一个问题

<!DOCTYPE html>
<html>
    <head>
   <meta charset="UTF-8">
   <title>输入文本</title>
   <style type="text/css">
    *{padding:0px;margin: 0px;}
   
     .warp{
              height:400px;
              width: 100%;
              border:1px blue solid;              
              display:table-cell;   
              text-align: center;
              vertical-align:middle;   
             }
     /*.content{
              text-align: center;             
              display:table-cell;
              vertical-align:middle;              
              }*/

   </style>
</head>
<body>
 <div class="warp">
        <div class="content">
            <img src="img\logo.jpg"/>
            <h1>Welcome to Website</h1>
            <h2>CSS层叠样式，用于网页样式设置，使网页更美观。</h2>
        </div>
</div>
</body>
</html>

将老师的代码改了一下，因为觉得css嵌套，我就直接将垂直居中属性，水平居中属性都写在了第一个外div上，也实现了水平垂直居中，但是为什么单元格的width变窄了50%？

效果如下图

宝慕林842399 2018-10-11

源自：CSS文本样式 3-10 vertical-align

收起

1回答

好帮手慕夭夭 2018-10-11 19:05:29

因为display: table-cell;会让盒子变为类似单元格 , div默认的宽度是相对浏览器100%显示的 . 而table表格中的宽度是由它的内容撑起来的 , 如下 :

所以宽度会变小了 , 希望解答了你的疑惑 , 祝学习愉快 ,望采纳

收起回答

提问者宝慕林842399 #1

但是我不是设置的它的width=“100%”了吗？

2018-10-11 19:14:26
好帮手慕夭夭回复提问者宝慕林842399 #2

单元格相当于td ,给它设置100%是不会起作用的 . 因为单元格是由它的内容撑起来的 . 如果把td放在一个table中 ,把table设置为100% , 那么唯一的这个单元格才会相对浏览器100% . 同学给body设置为 display: table;width: 100%; 让body成为一个table就可以了

2018-10-12 09:38:26