Ruby China

Rails 页面居中，所有内容左对齐，怎么实现比较好？

shangchen · 2013年06月11日 · 最后由 nightire 回复于 2013年06月12日 · 7485 次阅读

为了适应宽屏和普通屏幕，我想把我的网页设置居中，页面里面的所有内容默认为左对齐。应该怎么实现比较好呢？

doabit #1 2013年06月11日 
.cl{
  margin: 0 auto;
  text-align: left;
}

这样不 ok？

shangchen #2 2013年06月11日

#1 楼 @doabit 你的意思是全部内容放到一个 div 里面，然后对这个大的 div 定义样式吗

shangchen #4 2013年06月11日

#3 楼 @doabit 所有的内容都居中了啊

shangchen #5 2013年06月11日

直接对 body 设置属性居中合适不，这样的话也是网页中的内容也居中了，我是想网页内容左对齐

doabit #6 2013年06月11日

#5 楼 @shangchen 把 body 的text-align设置为 left 啊，字不会居中的

doabit #8 2013年06月11日 
<html>
<head>
  <title>Test</title>
  <style type="text/css">
    #main{
      margin: 0 auto;
      width: 960px;
    }
  </style>
</head>
<body>
<div id="main">
  <div id="left">左边内容</div>
  <div id="right">右边内容</div>
</div>
</body>
</html>

以这种结构为例，

nightire #9 2013年06月11日

#8 楼 @doabit 这跟 text-align 没啥关系啊，默认就是左对齐的。你这种结构 #main 设置已经是对的了，#left #right 一起浮动，设定好它们的宽度和间距，之后对 #main 清除浮动就 ok 了。在 #left #right 的里面文字默认就是左对齐的。

顺便提一句，CSS 没必要用 ID 做选择符，不方便模块化；命名也最好不要用 left right big small 这样的形容词，不利于代码阅读和理解，最好用表述精确的名词，比如 content sidebar 之类的。

doabit #10 2013年06月11日

#9 楼 @nightire 我这只是举例子子，懒得写别的名称，正常的是你所说那样，不过 lz 的结构应该不是这种，

nightire #11 2013年06月11日

#10 楼 @doabit 我 x...看错了，把你当楼主了……哈哈

doabit #12 2013年06月11日

#11 楼 @nightire 哈，我也发现我 1 楼写错了，不过正常情况不用设置

shangchen #13 2013年06月11日

#8 楼 @doabit 我把 div 不用 id，用 class 为啥就不行了呢，这两个除了唯一性区别还有啥区别呢

doabit #14 2013年06月11日

#13 楼 @shangchen 没有啊，我那个只是举个例子，你随便用什么，你用的啥结构？正常来说，只要把 div 设置为margin: 0 auto就可以居中了，字默认就是靠左的

需要 登录 后方可回复, 如果你还没有账号请 注册新账号