I'm trying to vertically and horizontally center content of an unknown height in a UIWebView.
我试图在UIWebView中垂直和水平地居中未知高度的内容。
What I have right now works great in Safari:
我现在所拥有的在Safari中非常有用：
http://jsfiddle.net/HT9J5/
However, it does not look right when presented in a UIWebView:
但是，在UIWebView中显示时看起来不正确：
Any ideas how to get this to work? One thing I cannot do is set the viewport meta, because this needs to work when presenting the UIWebView in a modal view controller on iPad, where it is not the full width of the screen:
任何想法如何让这个工作？我不能做的一件事是设置视口元，因为这需要在iPad上的模态视图控制器中呈现UIWebView时工作，它不是屏幕的整个宽度：
<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;"/>
1 个解决方案
#1
12
I tried your example and it works fine in an UIWebView. I don't know how you load your HTML / CSS. Are you sure that the CSS is loaded correctly? Have you set the frame of your UIWebView?
我尝试了你的例子，它在UIWebView中运行良好。我不知道你是如何加载HTML / CSS的。你确定CSS加载正确吗？您是否设置了UIWebView的框架？
Here is the code that works for me. I set the frame of the UIWeb smaller than the screen size because you mentioned presenting it modally.
这是适合我的代码。我将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];
}
#1
12
I tried your example and it works fine in an UIWebView. I don't know how you load your HTML / CSS. Are you sure that the CSS is loaded correctly? Have you set the frame of your UIWebView?
我尝试了你的例子，它在UIWebView中运行良好。我不知道你是如何加载HTML / CSS的。你确定CSS加载正确吗？您是否设置了UIWebView的框架？
Here is the code that works for me. I set the frame of the UIWeb smaller than the screen size because you mentioned presenting it modally.
这是适合我的代码。我将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];
}