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 我应该应用于h3标签，以便“使用你的烤架”文本将在中间垂直对齐？我不应该为第二个h3标签使用特定的行高。

我试过显示：table，table-cell，table-head。什么都没有用:(

Answer 1

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

.TRM_Propane_sfty_ttl 
 {display:inline;}

在你的CSS中

。

按照使用的方式检查我的demo table。

如果不使用h3元素，您还可以使字体看起来更像this one 你的代码有点整洁; - ）

Answer 2

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

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

使跨度看起来像h3等。除非，否则它可能看起来不是100％ 你已经对h3进行了修改（从而改变了标准的h3 css配置）

Answer 3

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

像这样：

http://jsfiddle.net/QSjM3/

话虽如此，我确实认为连续三个h3标签是不寻常的，所以你应该考虑重新构建你的标记