有什么方法可以垂直对齐 HTML 中的文本？答案

【问题标题】：Is there any way to vertically justify text in HTML?有什么方法可以垂直对齐 HTML 中的文本？
【发布时间】：2012-02-08 06:54:46
【问题描述】：

我目前正在一个 HTML 表格中显示文本，该表格只是一大行和两列。我正在使用表格来利用并排方面的优势（如果有人能告诉我这样做的优势，我可以切换到浮动 div）。我在左侧填充文本，然后在右侧填充。从上到下的文字分布，两边看起来均匀是非常关键的。

每一面的内容是固定的（来自数据库），而右侧的内容大部分时间都很短。类似于文本对齐如何将单词隔开以适应一行，有什么方法可以垂直对齐右列中的行以确保从上到下有文本？

我一直在疯狂地寻找，但没有任何运气。

这是它的外观截图。我试图准确地复制一个宗教文本（因此列数据是固定的，这实际上是它在实际书中的样子），但我很难对其进行微调。奇怪的是，有时没有问题，但有时却很糟糕：

【问题讨论】：

如果“并排”是您选择只有两列的表格的主要标准，为什么不使用浮动 div 元素？
我完全愿意这样做，但有什么好处呢？这样做的好处是它已经完成并且正在工作:)
slides.html5rocks.com/#css-columns

标签： html iphone uiwebview html-table text-alignment

【解决方案1】：

假设 UIWebView 支持它 (Mobile Safari has since iOS 3.2)，您可以使用 -webkit-column CSS 属性。

这些将 HTML 元素的内容流到您指定的尽可能多的列中，并在每列中放置尽可能多的文本。它们还允许您指定规则（如边框）和列之间的间隙，这将适合您的设计。

这意味着您不必再自己拆分内容了。

http://jsfiddle.net/bexD4/2/

HTML

<div class="text"><p>I am currently displaying text in an HTML table that is simply one large row and two columns...</div>

<div class="references">If "Side by Side" is your main criterion for choosing a table with just two columns...</div>

CSS

.text {
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -webkit-column-rule: solid 1px #999;
}

.references {
    padding: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-rule: solid 1px #999;
    border-top: solid 1px #999;
}

【讨论】：

哇。我对这一切一无所知。非常感谢！我今天将努力实现这一点。

【解决方案2】：

如果您问这个问题是因为您想将它用于 iBook，请使用iBook Author in the Mac App Store，它是免费的。

或者，您可以设计一个包含 3 列的表格，前 2 列您可以添加 colspan=2。这将使顶部的 2 列，然后其余的将作为 3 列放置到位。

【讨论】：