现在的位置: 首页 > 综合 > 正文

CSS DIV的居中,使用表格

2013年08月24日 ⁄ 综合 ⁄ 共 1190字 ⁄ 字号 评论关闭

    前几天帮人改一个网站的界面,页码的部分要能自动适应内容的长度,还要居中。由于页码部分的<div>是嵌套在另一个<div>只内的,他们的前端能作出自动长度,但是只能左对齐,用的<div
style="float: left;">,说是<div style="float: center;">无效,我试了一下,的确<div style="float: center;">没有效果,网上找了一下发现很多说的方法也是float: left;,其他的用JS
的实现的没试过(我的JS的确不咋的,也懒得试)。

    但是我发现如果现在<div>里放一个table的话table设置为center是可以实现居中的,然后我就把页码的<div>放在了table里,用table来控制居中,用了这样的方法来实现自动的长度和居中。模拟代码如下

(转载请注明出处http://blog.csdn.net/wwwqqeew)

<!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>
<style type="text/css">
#RR {
    height: 400px;
    width: 700px;
    border-color:#000000;border-style:solid;
}
#R1 {
    height: 200px;
    width: auto;
border-color:#FF6347;border-style:solid;
}

#R21 {
    height: 20px;
    width: auto;
    border-color:#FF6347;
    border-style:solid;
    text-align:center;
    margin-bottom:opx;}

}
</style>
</head>

<body>
<div id="RR">
  <div id="R1">显示新 Div 标签的内容</div>
  <table width="auto" border="1" align="center">
    <tr>
      <td><div id="R21" style="float: left;">这里是加了table的</div></td>
    </tr>
  </table>
</div>
</body>
</html>


转载请注明出处http://blog.csdn.net/wwwqqeew

抱歉!评论已关闭.