在UIWebView中垂直和水平居中HTML

时间:2012-06-04 13:28:08

标签: html css ios uiwebview

我正在尝试在UIWebView中垂直和水平居中未知高度的内容。

我现在所拥有的功能非常适合Safari:

http://jsfiddle.net/HT9J5/

但是,在UIWebView中显示时看起来不正确:

enter image description here

任何想法如何让这个工作?我不能做的一件事是设置视口元,因为当在iPad上的模态视图控制器中呈现UIWebView时,这需要工作,它不是屏幕的整个宽度:

<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;"/>

1 个答案:

答案 0 :(得分:12)

我尝试了你的例子,它在UIWebView中运行良好。我不知道你是如何加载HTML / CSS的。你确定CSS加载正确吗?您是否设置了UIWebView的框架?

这是适合我的代码。我将UIWeb的框架设置为小于屏幕尺寸,因为您提到了以模态方式呈现它。

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSString *htmlString = @"<html><head><style type='text/css'>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;}body {display: table-cell;vertical-align: middle;padding: 20px;text-align: center;-webkit-text-size-adjust: none;}</style></head><body><p><strong>Title</strong></p><p>A long explanation about what's going on and all that.</p><p><a href='#'>A link</a></p></body></html>​";

    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(10.0, 10.0, 300.0, 400.0)];
    [self.view addSubview:webView];
    [webView loadHTMLString:htmlString baseURL:nil];

    [webView release];
}

enter image description here