css - 水平行内对齐

Question

我在名为 mission 的部分 ID 中分配了一个 h2 和 p 元素。您可以在这里查看详细代码 http://jsfiddle.net/5Umm3/ 我经常遇到在水平方向对齐两个元素的问题。相反，它们开始垂直对齐，高度为 45 px，我希望 h2 元素即任务在 45 px 高度的部分 id mission 中垂直居中对齐，p id 也在 45 px 高度中垂直居中对齐。 h2 和 p 相互水平对齐。我还看到 p 有点粗体，但我没有给它加粗，在这种情况下它是否继承了以前 id 的字体粗细？提前感谢您的帮助。

Answer 1

我认为这就是您所追求的:

1. 让 #mission 中的 h2 和 p 并排放置。
2. 删除 p 上的粗体。

为此，我将 display:inline-block; 添加到 h2 和 p。

h2 也垂直对齐到顶部。 Width 被添加到两者。

我用 font-weight:normal; 删除了 bold。

#mission h2{
    text-align:left;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:22px;
    font-weight:bold;
    margin-left:40px;
    color:blue;
    display:inline-block;
    width:200px;
    vertical-align:top;
}
#mission p{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    margin-right:40px;
    display:inline-block;
    width:450px;
    font-weight:normal;
}

http://jsfiddle.net/jasongennaro/5Umm3/2/