960网格系统中的自定义居中内容

时间:2013-04-09 10:16:03

标签: css 960.gs

我有一个960gs的布局,但我不知道哪个是使用960grid系统将这个页面的内容(http://andreapuiatti.de/screenshots/question.png)居中的最佳方法。

设计师保证这个设计基于960gs但是地狱......就是列中的一切!

我提出的唯一解决方案是使用grid_12,然后添加我自己调整大小的自定义元素,但为什么要使用网格系统?

1 个答案:

答案 0 :(得分:2)

确定图像和文本将跨越多少列,例如12,并将12列行创建为父容器(均在960网格框架内)。

在该行中,我将创建一个包装类(给它一个类),然后为图像(或其容器)应用标准CSS规则,如margin: 0 auto;。如果图像未包含在块级元素中,则将display: block应用于图像。

对于文本,p元素将填充包装元素,您可以根据需要调整边距。

通常,这些CSS网格框架会创建包含内容,文本和图像等的块级框。由设计者决定如何在每个块中布置元素。 960.gs和类似的CSS框架仅定义了您的布局,而不是在网格布局中定义每个框/块/面板内容的细节。

关于屏幕截图和设计器
您的设计师可能无法理解网格的工作方式,您需要与他/她讨论指定图像边缘的位置。问题不在于CSS框架,但设计规范需要更加精确。这没什么不对!