Question

我在名为mission的section id中分配了一个h2和p元素。您可以在此处查看详细代码http://jsfiddle.net/5Umm3/ 我经常面临在水平方向上对齐两个元素的问题。相反，它们开始垂直对齐，高度为45像素，我想要h2元素，即任务在部分id任务的45像素高度中垂直居中对齐，并且p id也在45像素高度中垂直居中对齐。 h2和p水平对齐，彼此内联。另外我看到p有一些粗体，没有我给它加粗，它是否继承了此场景中前一个id的字体粗细？感谢您的帮助。

Answer 1

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

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

#mission {font-weight: bold;}

由于p标签包含在任务部分内，因此任务部分的任何设置都会覆盖它，除非您在本地更多地覆盖p格式。如果你想分别控制p，你可以使用这样的CSS：

#mission p {font-weight: normal;}

至于你所写的关于对齐的所有内容，我不会回答你的问题。请重新提一个简单的问题，我们可以尝试提供帮助。

修改仍在猜测你想要什么，但如果你想让“任务”标题的左边缘与它下面文本的左边缘对齐，那么删除你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; }

Answer 2

我认为这就是你所追求的目标：

将h2中的p和#mission并排放置。
删除bold上的p。

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

h2也垂直对齐顶部。两者都添加了Width。

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

#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/

水平内联对齐

2 个答案: