这种情况如何让div居中?_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:10:42
原创
1342人浏览过

我的页面大体是:



    一段while代码
    >


总之最后生成的实际页面标签大体是:

     

      
  • ...

  •   
  • ...

  •   
  • ...

  •  

     

      
  • ...

  •   
  • ...

  •   
  • ...

  •  

     ...


我现在的问题就是这些个div的样式要怎么设置,才能让它在整个ul里处于居中位置啊??我试过了设置成margin:0 auto这种,但是不行,我之所以一定要用居中的样式,是因为想在所有大小的屏幕上都能居中显示,否则光靠调元素间距,屏幕大小一变就跑偏了

请教各位~~~~

居然设计家
居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

居然设计家 64
查看详情 居然设计家

回复讨论(解决方案)

ul下嵌套div元素不符合XHTML规范。ul是块级元素,设置固定的宽度值以后才能通过 margin:0 auto;样式进行居中。如果还需要对列表项进行“分组”以设置不同的样式,可以通过添加不同的样式类来实现,比如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><style type="text/css">ul { margin:0 auto; width:200px; }li.listGroup1 { color:red; }</style><ul>  <li class="listGroup1">1</li>  <li class="listGroup1">2</li>  <li class="listGroup2">3</li></ul></body></html>
登录后复制



设置ul里边的样式:text-align:center也能看到效果。。。。

可是text-align貌似只对文本起效果

最后问题还是解决了,我要求是一行四列,我就每行弄了四个div宽度分别设为25%,然后把

  • 放在里面,并设置margin:auto
  • HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号