如何在 WKWebView 中垂直居中文本？
Posted
技术标签:
【中文标题】如何在 WKWebView 中垂直居中文本？【英文标题】：How to vertically center the text in WKWebView? 【发布时间】：2017-09-13 19:14:23 【问题描述】：我在我的 ios (swift) 应用程序中使用 WKWebView，并且我正在使用 loadhtmlString(string, baseURL: )。现在的问题是我希望 HTML 在框架中垂直居中。文本长度可变。我该怎么做？
这是来自 Xcode 的 HTML 屏幕截图：
这是输出的图像。顶部的 HTML 位于上方，我希望它在其视图中居中对齐（视图距离顶部 300 点）：
【问题讨论】：
请张贴截图或 HTML @Asleepace 添加了截图。 嗨，Amir - 让我震惊的是，最好的方法是编辑 HTML，或者通过注入一些内联 CSS 或应用外部样式表，而不是尝试调整 WKWebView 本身. 简单。 x = 10...这就是问题...对吗？ 【参考方案1】：尝试将此 HTML 与内联 CSS 一起使用，您可以替换要居中的 div 之间的内容：
<div style="display:flex;align-items:center;height:100%;justify-content:center;">
<p>You content here</p>
</div>
此代码适用于我在 iPhone 6 模拟器上使用 Swift 3.0
import UIKit
import WebKit
class ViewController: UIViewController
var webView:WKWebView?
override func viewDidLoad()
super.viewDidLoad()
override func viewDidAppear(_ animated: Bool)
webView = WKWebView(frame: self.view.frame)
self.view.addSubview(webView!);
addHTML()
func addHTML()
let html = "<html><body><div style='height:100%;background-color:black;display:flex;align-items:center;justify-content:center;'><p style='color:white;font-size:100px;'>Asleepace</p></div></body></html>";
webView!.loadHTMLString(html, baseURL: nil)
示例输出
【讨论】：
这在 iOS 应用中似乎对我不起作用。除非我添加 height:500px ，否则它甚至不适用于 html。见这里：w3schools.com/html/tryit.asp?filename=tryhtml_basic_document @AmirSiddique Ya the height:100% 用于填充父容器，不确定您使用的是哪个尺寸。 @AmirSiddique 我刚刚在 xcode 中测试过，对我来说似乎工作正常，看看上面的演示代码 不是真的。我通过使用 padding-top 得到了一个妥协的解决方案，但后来做了艰苦的工作，并为数据库中的每个 html 字符串手动设置了 WkWebView 高度。这很乏味，但它提供了我想要的。以上是关于如何在 WKWebView 中垂直居中文本？的主要内容，如果未能解决你的问题，请参考以下文章