设置了display以后margin:0 auto;就失效了。

设置了display以后margin:0 auto;就失效了。

margin:0 auto; 水平居中失效了

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
妮可妮可妮_ 2018-11-02 16:17:09

你好同学

可以通过在外层再嵌套一个div使用margin:auto实现水平居中效果,如下图所示

http://img1.sycdn.imooc.com//climg/5bdc07d900019f8808930747.jpg

祝学习愉快!

妮可妮可妮_ 2018-11-01 10:51:22

你好同学,

margin:0 auto可以使块级元素水平居中显示,如果还有疑问,建议同学将完整代码上传(不要截图代码,因为手动输入的有可能和上传的代码有差异),以便更好的检测和解决问题

祝学习愉快!

  • <html><head> <meta charset="utf-8"> <title>background属性</title> <style type="text/css"> * {margin: 0;padding: 0;} div { width: 650px; height: 650px; margin: 0 auto; background-image: url('http://img1.sycdn.imooc.com/climg//58dc9d360001d65806500650.jpg'); background-color: transparent; background-repeat: no-repeat; text-align: center; display: table-cell; vertical-align: middle; } </style> </head> <body> <div> 《长歌行》 <br> <br>青青园中葵,朝露待日晞。 <br>阳春布德泽,万物生光辉。 <br>常恐秋节至,焜黄华叶衰。 <br>百川东到海,何时复西归。 <br>少壮不努力,老大徒伤悲。 <br> </div> </body></html>
    2018-11-02 15:04:07
  • margin: 0 auto;可以居中。但是文字垂直居中就没有了。 设置display:table-cell或block,margin就失效了
    2018-11-02 15:05:08
  • 设置display: table-cell;元素会作为一个表格单元格显示,而margin:0 auto可以使块级元素水平居中显示,所以设置margin:0 auto不能实现效果,同学可以通过 display: table-cell;vertical-align: middle;实现多行文字垂直居中, text-align: center;实现文字水平居中显示效果
    2018-11-02 15:49:41
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师