如何使用CSS對齊文本和子節點？

我有形式如何使用CSS對齊文本和子節點？

<div class="display_archive"> 
    <div class="campaign">05/01/2016 - <a href="omitted">Back from the Philippines</a></div> 
    <div class="campaign">02/28/2016 - <a href="omitted">Special prayer request: Go Philippines</a></div> 
    <div class="campaign">02/26/2016 - <a href="omitted>Go Go Year of Big Changes</a></div> 
</div>

它看起來像

2016年5月1日的HTML - 回到菲律賓
2016年2月28日 - 特別的禱告請求：進入菲律賓
2016/02/26 - 轉到大變化的一年

在不更改HTML的情況下，如何使用CSS沿連字符對齊-？例如，如果我想規劃一個連字符在包含`DIV的1/3，它可能看起來像：

來源

2016-10-02 Merchako

您可以在父用display: table與margin: 0 auto。

.display_archive { 
 
    margin: 0 auto; 
 
    display: table; 
 
}

<div class="display_archive"> 
 
    <div class="campaign">05/01/2016 - <a href="omitted">Back from the Philippines</a></div> 
 
    <div class="campaign">02/28/2016 - <a href="omitted">Special prayer request: Go Philippines</a></div> 
 
    <div class="campaign">02/26/2016 - <a href="omitted">Go Go Year of Big Changes</a></div> 
 
</div>

來源

2016-10-02 19:31:05

這看起來和我想的不一樣，但我想我更喜歡它。如果你想在我的問題的背景下描述它，你會怎麼稱呼它？ – Merchako

不確定你的意思，在這種情況下，你只需將中心父元素或'display_archive'作爲'body'。你可以做同樣的事情，像這個https://jsfiddle.net/Lg0wyt9u/1254/但我認爲其他解決方案更好。 –

如果你使用這個概念來更多地瞭解它，你會怎麼樣谷歌？ – Merchako

您可以對齊錨標記，而不是連字符，像這樣：

.display_archive { 
 
    display: table; 
 
} 
 
.campaign { 
 
    display: table-row; 
 
} 
 
.campaign a { 
 
    display: table-cell; 
 
    padding-left: .5em; 
 
}

<div class="display_archive"> 
 
    <div class="campaign">05/01/2016 - <a href="omitted">Back from the Philippines</a></div> 
 
    <div class="campaign">02/28/2016 - <a href="omitted">Special prayer request: Go Philippines</a></div> 
 
    <div class="campaign">02/26/2016 - <a href="omitted">Go Go Year of Big Changes</a></div> 
 
</div>

這使得瀏覽器治療outter格狀一個表格並將您的錨點標籤定義爲單元格。這會使瀏覽器在您的錨標記之前呈現文本，例如（前一個）表格單元格。因此，您的所有定位標記都在同一個（第二個）列中對齊。

下面是進一步閱讀display: table一些有用的信息：

注意，你可能需要檢查，如果這是支持IE7或如果您需要支持這些瀏覽器，請降低。

來源

2016-10-03 00:20:20

如何使用CSS對齊文本和子節點？

回答

相關問題