这种情况怎么让div居中?
日期：2014-05-17 浏览次数：20697 次
这种情况如何让div居中???
我的页面大体是:
<ul style="...">
<?php>
一段while代码
<?>
</ul>
总之最后生成的实际页面标签大体是:
<ul style="...">
<div style="...">
<li>...</li>
<li>...</li>
<li>...</li>
</div>
<div style="...">
<li>...</li>
<li>...</li>
<li>...</li>
</div>
...
</ul>
我现在的问题就是这些个div的样式要怎么设置,才能让它在整个ul里处于居中位置啊??我试过了设置成margin:0 auto这种,但是不行,我之所以一定要用居中的样式,是因为想在所有大小的屏幕上都能居中显示,否则光靠调元素间距,屏幕大小一变就跑偏了
请教各位~~~~
------解决方案--------------------
ul下嵌套div元素不符合XHTML规范。ul是块级元素，设置固定的宽度值以后才能通过margin:0 auto;样式进行居中。如果还需要对列表项进行“分组”以设置不同的样式，可以通过添加不同的样式类来实现，比如：
我的页面大体是:
<ul style="...">
<?php>
一段while代码
<?>
</ul>
总之最后生成的实际页面标签大体是:
<ul style="...">
<div style="...">
<li>...</li>
<li>...</li>
<li>...</li>
</div>
<div style="...">
<li>...</li>
<li>...</li>
<li>...</li>
</div>
...
</ul>
我现在的问题就是这些个div的样式要怎么设置,才能让它在整个ul里处于居中位置啊??我试过了设置成margin:0 auto这种,但是不行,我之所以一定要用居中的样式,是因为想在所有大小的屏幕上都能居中显示,否则光靠调元素间距,屏幕大小一变就跑偏了
请教各位~~~~
------解决方案--------------------
ul下嵌套div元素不符合XHTML规范。ul是块级元素，设置固定的宽度值以后才能通过margin:0 auto;样式进行居中。如果还需要对列表项进行“分组”以设置不同的样式，可以通过添加不同的样式类来实现，比如：
- HTML code
<!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也能看到效果。。。。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
