居中对齐流体布局答案

【问题标题】：Center align fluid layout居中对齐流体布局
【发布时间】：2011-09-13 06:18:35
【问题描述】：

如何为多个屏幕居中对齐流体布局（没有固定的 px 值，只有 % 值）？

即我将在桌面（可以是多种分辨率）、移动设备（例如 iPhone）甚至平板电脑（例如 iPad）上查看相同的 HTML。

我认为以下解决方案不适用于我的情况；

使用宽度：100%（居中对齐不会留任何空间）

使用宽度：80% 左右，然后使用边距：0 自动（这将在台式机上工作正常，但会浪费移动设备上的空间..即我想要优化移动设备上的有限空间）

使用 text-align:center （我想居中对齐布局而不是正文）

请提出建议。

【问题讨论】：

标签： iphone html css ipad mobile-safari

【解决方案1】：

<div style="width:100%; text-align:center;">
        <img style="margin:auto; display:block;" src="images/web_banner.gif"/>
        <p>Website coming soon…</p>
</div>

【讨论】：

请进一步扩展并解释您的答案。

【解决方案2】：

在 div 中使用 align="center" 然后你将获得 div 中的内容将居中

【讨论】：

【解决方案3】：

设置一个页面非常困难，除非它只是完全流动的文本。只是因为图像需要以特定尺寸显示，然后需要重新调整尺寸以适应更小的分辨率。话虽如此，如果这只是一个基于文本的网站，那么

width: 80%;
margin: 0 auto;
text-align: center;

iphone 支持边距，所以应该可以正常工作。如果您有图像并且需要调整大小，那么您真的应该查看 jquery 或 javascript 来调整图像大小。

还可以使用 text-align: center 以实现向后兼容性。将所有这些用作包装器，然后为您设置内容和导航

text-align: left;

【讨论】：