水平内联对齐

Question

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

Answer 1

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

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

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

h2 也与顶部垂直对齐。两者都添加了宽度。

我用 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/

Answer 2

我真诚地试图理解你的问题是什么，但我只是无法理解其中的大部分内容。尝试使用带有明确问题、以问号结尾的短句来提问。

唯一以问号结尾的句子是用 p 粗体询问。如果您在任何合理的调试器（如 Firebug 或 Chrome 调试器）中查看 HTML，您可以看到 p 由于以下 CSS 而变得粗体：

#mission {font-weight: bold;}

由于 p 标记包含在任务部分内，因此它被任务部分，除非您在本地覆盖 p 格式。如果你想单独控制 p ，你可以像这样使用 CSS：

#mission p {font-weight: normal;}

至于你写的所有关于对齐的内容，我不明白你的问题是什么。请重新表述一个简单的问题，我们可以尽力提供帮助。

编辑：
仍在猜测您想要什么，但如果您希望“Mission”标题的左边缘与其下方文本的左边缘对齐，请删除 CSS 这部分中指示的行：

#mission h2{
    text-align:left;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:22px;
    font-weight:bold;
    margin-left:40px;    // <---- Remove this line
    color:blue;
}