h3标签垂直居中对齐无效

Question

这是我需要输出的内容。

HTML标记如下:

<h3 class="TRM_Propane_sfty_ttl">Placement of Your Grill &amp; Propane Cylinders</h3>
<h3 class="TRM_Propane_sfty_ttl">Use of Your Grill</h3>
<h3 class="TRM_Propane_sfty_ttl">Other Propane Cylinder Safety Tips</h3>

我应该对h3标签应用什么CSS样式，以使文本“使用您的烧烤架”在垂直方向上居中对齐？我不应该为第二个h3标签使用特定的行高。

我尝试了display: table、table-cell、table-head。但都没有起作用 :(

- Vel Murugan S

---

我认为在这里使用 ul 或 nav 元素会更合适。h? 系列的 标题 是设计为块级元素的（例如，可作为独立的一行）。 - scunliffe

你应该修改你的HTML。我无法想象连续三个H3标签在语义上是正确的情况。我猜你可能应该使用表格，而那些H3标签应该改成TH标签。然后你会发现vertical-align效果很好！ - Derek Henderson

@DerekHenderson 我希望这是一个答案。解释得非常好。使用除表格以外的任何东西来表示可视化表格数据都是极不明智的。希望我说得清楚。 :-) - krishwader

表格因为多年来人们一直将其用于布局而声名狼藉。当你有表格数据时，表格是最好的选择。听起来您确实有表格数据！ - cronoklee

如果您使用的内容最好以表格形式呈现，那么正确的标记是使用表格标记，而不是使用其他标记并将其样式化为表格。仅在布局目的上使用表格时，应避免使用表格；对于表格数据，表格是正确的标记。@VelMuruganS - Derek Henderson

Answer 1

是块级元素（即下一个元素将进入下一行），因此一种方法是使其内联（例如 span 元素）。

.TRM_Propane_sfty_ttl 
 {display:inline;}

在你的CSS中。

查看我的演示，同时也使用了table。

而且不使用h3元素，你也可以使字体看起来更大，就像这个例子一样，还能让你的代码更整洁 ;-)。

- Edper

Answer 2

为什么不在span上使用font-style呢：

<span style="font-size:large;bold,etc."> 

让这个span看起来像一个h3等等。除非你已经对h3进行了修改（从而改变了标准的h3 CSS配置），否则它可能看起来不完全一样。

- Joseph Orlando

Answer 3

一种方法是将所有内容包装在一个新标签中，并应用display:table。然后应将h3元素设置为display:table-cell

像这样：

http://jsfiddle.net/QSjM3/

话虽如此，我同意连续三个h3标签确实不太寻常，因此您应该考虑重新构建您的标记

- cronoklee

---

我觉得display:table很可怕，涉及到太多的工作。它并不止于此，对于display:table-cell的正确应用，还需要将display:table-row应用于其父元素，然后添加`disp..哦等等，仅仅是打字我就感到疲倦了 :-) - krishwader

是的，这确实有点烦人。我很少使用它，但偶尔它是完成某些任务最简单的方式。看来表格并不是完全没有用处！ - cronoklee

@cronoklee，表格从来不是完全的坏东西。它们只是被滥用了，被用于错误的目的。 - Derek Henderson

@Derek Henderson 我完全同意！事实上，我刚刚在上面的评论中发了同样的话！ - cronoklee

我想这是布局与表示的问题。 - krishwader