水平內嵌對齊

我在名爲mission的部分id內分配了h2和p元素。您可以在這裏查看詳細的代碼http://jsfiddle.net/5Umm3/ 我經常遇到問題，以水平方向對齊兩個元素。相反，他們開始垂直對齊，高度爲45px，並且我希望h2元素，即任務在垂直中心對齊在45px高度的部分id任務和p id也垂直居中對齊在45px高度。 h2和p彼此水平對齊。另外我看到p有些粗體而沒有給我粗體，在這種情況下它是否繼承了前一個id的字體重量？感謝您的幫助提前。水平內嵌對齊

來源

2011-07-30 varun86

我想這是你所追求的：

使h2並在#mission的p並肩而坐。
刪除p上的bold。

爲了做到這一點，我添加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/

來源

2011-07-30 13:55:15

謝謝傑森。這是我正在尋找的。 – varun86

樂意幫忙@ varun86！ –

我很好奇地試圖理解你的問題是什麼，但我無法追隨它的大部分。嘗試使用帶有明確問題的簡短句子，以問號結束提問。

以問號結尾的唯一一句話是問與p有大膽。如果你看一下在任何合理的調試器的HTML（類似Firebug或Chrome調試器），你可以看到，在p得到，因爲這個CSS的大膽：由於p標籤包含在任務部分中

#mission {font-weight: bold;}

，它被任務部分的任何設置所覆蓋，除非您在本地覆蓋更多的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; 
}

來源

2011-07-30 05:23:04 jfriend00

對此深感抱歉。那麼，我想看看如何讓p和h2水平對齊而不是現在的垂直對齊？謝謝你的幫助。 – varun86

我不明白。我看到「Mission」的標題，我看到一段文字後面出現「我們努力提供......」。你只是想讓特派團向左移動，使其左邊緣與文本對齊？如果是這樣，請參閱上面我的答案中的第一個編輯，瞭解如何執行此操作。 – jfriend00

水平內嵌對齊

回答

相關問題