chrome 查看css时提示,顺带问下居中兼容的问题

未命名.jpg
划线是不用写还是无法使用?
一个jsp里的html的css
如何使得里面的div都居中?
第一次碰上jsp弄完之后显示在ie居中了,在chrome里居然不能居中。
样式该怎么写?
ie下查看源文件得到的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
  <head>
  	<title>日志搜索</title>
  	<style type="text/css">
  		body {
  			text-align:center;
  		}
  		.btn {
  			background:url("");
  			width:124px;
  			height:47px;
  		}
  		.result .centerDiv{
  			margin-left: auto;
  			margin-right:auto
  		}
  		td {
  			//align:center;
  		}
  		table {
  			text-align:center;
  		}
  	</style>
  	<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
  </head>
  <body>
  	<h2>something</h2>
  	<p>这里可以居中</p>
  	<div>
  	<table>
  		<tr>
  		<td> 
<form id="logAction" name="..Action" onsubmit="return judgeDays();" action=".." method="post">
<table class="wwFormTable"><!--查看源文件里面自动加的class?-->
	       关键:<input id="key" type="text" name="keyword"><br />
	       时间[a,b):  <input type="text" id="befTime" name="beforeTime" >&nbsp;&nbsp;<input type="text" id="aftTime" name="afterTime" >
	     		<input type="submit"  value="查询">
	      		<input type="reset"  value="重置">
	    </table></form>
	    </td>
	    <td>
	    	<form id="..Action" name="..Action" action=".." method="post">
<table class="wwFormTable">
	     		<input type="submit" value="now">
	    	</table></form>
	    </td>
    	</tr>
  	</table>
  	</div>
   	<div class="result">
   		
   	</div>
   	
  </body>
</html>
阅读 8k
2 个回答

删除线表示样式被覆盖
Developer-Tools<ins><em>http</em></ins>segmentfault.com-q-1010000000146426.png
感叹号+删除线表示属性无效,注意:align是HTML属性而不是CSS属性,而且实际上现在不推荐使用。在 HTML 4.01 中,不赞成使用 body 元素的 align 属性;在 XHTML 1.0 Strict DTD 中,不支持 body 元素的 align 属性。
Developer-Tools<ins><em>http</em></ins>segmentfault.com-q-1010000000146426d.png

text-align各浏览器表现不一样:

IE6/7及IE8混杂模式中,text-align:center可以使块级元素也居中对齐。其他浏览器中,text-align:center仅作用于行内内容上。

因此对于上面的代码为table加上 margin:0 auto;可以实现非IE浏览器中的居中。

一般的居中方式是设定width+margin:0 auto;并且doctype要为标准模式。
因为为body设定text-align:center的后果是你要为后面左对齐的文字再设定 text-align:left;

新手上路,请多包涵
  1. 「删除线」意为「此样式被其他优先级更高的样式定义所覆盖而失效」
  2. 「.result .centerDiv」只对「位于 class="result" 的元素下的 class="centerDiv" 的子元素(任意层级)」有效,但是在你最终输出的 html 里没有 .centerDiv 元素存在(是否后台代码存在问题?)
  3. 「text-align:center;」决定元素内容,对元素本身不起作用
  4. 对 table 可以直接使用属性 align="center" 实现居中
推荐问题
logo
101 新手上路
子站问答
访问
宣传栏