html - 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>

什么是CSS，以便文本“Use of Your Grill”在中间垂直对齐？我不应该为第二个 h3 标签使用特定的行高。

我试过显示：表格，表格单元格，表格头。没有任何效果:(

Answer 1

h3是块级别（即下一个元素将转到下一行），因此一种方法是制作它inline（如 span 元素）。

.TRM_Propane_sfty_ttl 
 {display:inline;}

在你的 CSS 中。

顺便检查一下我的演示table。

并且不使用h3元素你也可以让你的字体看起来更大，你的 代码更整洁;-)

Answer 2

Why don't you just use font-style on a span:

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

Make the span look like an h3, etc. It might not look 100% unless you have made modifications to the h3 already (thus changing the standard h3 css configuration)

Answer 3

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

像这样：

http://jsfiddle.net/QSjM3/

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