为什么不需要display-table就可以直接居中了?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景</title> <style> /*此处写代码*/ div{text-align:center; background:url(http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg); height:600px; width:600px; display:table-cell; vertical-align:middle; } </style> </head> <body> <div> 《长歌行》 <br> <br>青青园中葵,朝露待日晞。 <br>阳春布德泽,万物生光辉。 <br>常恐秋节至,焜黄华叶衰。 <br>百川东到海,何时复西归。 <br>少壮不努力,老大徒伤悲。 <br> </div> </body> </html>
0
收起
正在回答 回答被采纳积分+1
3回答
chat_c
2019-04-26 11:43:28
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>背景</title> <style> .qq{ background-image: url(http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg); background-color: red; width: 498px; height: 498px; display: table;/*此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。*/ } .ww{ vertical-align: middle;/*设置元素内容垂直居中,多行内容居中方式*/ display: table-cell;/*属性指让标签元素以表格单元格的形式呈现,类似于td标签。*/ text-align: center;/*元素类内容水平对其方式,居中对其*/ } /*此处写代码*/ </style> </head> <body> <div class="qq"> <div class="ww"> 《长歌行》 <br> <br>青青园中葵,朝露待日晞。 <br>阳春布德泽,万物生光辉。 <br>常恐秋节至,焜黄华叶衰。 <br>百川东到海,何时复西归。 <br>少壮不努力,老大徒伤悲。 <br> </div> </div> </body> </html>
你这个是以网页整体为父类元素,所以不用转换为表格
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星