Heim > Web-Frontend > HTML-Tutorial > 这种情况如何让div居中?_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 12:10:42
Original
1206 Leute haben es durchsucht

我的页面大体是:



    一段while代码
    >


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

     

      
  • ...

  •   
  • ...

  •   
  • ...

  •  

     

      
  • ...

  •   
  • ...

  •   
  • ...

  •  

     ...


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

请教各位~~~~


回复讨论(解决方案)

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>
Nach dem Login kopieren



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

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

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

  • 放在里面,并设置margin:auto
  • Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage