中心对齐流体布局

时间:2011-09-13 06:18:36

标签: iphone html css ipad mobile-safari

如何为多个屏幕居中对齐流体布局(没有固定的px值,只有%值)?

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

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

  
      
  1. 使用宽度:100%(中心对齐没有任何空间)

  2.   
  3. 使用widdth:80%左右然后使用margin:0 auto(这会   在台式机上工作正常,但会浪费移动设备上的空间......我   想要优化移动设备上的有限空间)

  4.   
  5. 使用text-align:center(我想中心对齐布局而不是   文本)

  6.   

请建议。

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

答案 2 :(得分:-1)

设置页面非常困难,除非它只是文本完全是液体。仅仅因为图像需要以特定尺寸显示,然后需要重新调整尺寸以适应较小的分辨率。如果这只是一个基于文本的网站,那就说

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

iphone支持保证金,所以这应该可以正常工作。如果您有图像并需要调整大小,那么您应该真正查看jquery或javascript以调整调整大小时的图像。

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

text-align: left;