如何堆疊內嵌塊元素

我有一個DIV，我希望它裏面的元素（h1和P）居中。因此，我將DIV設置爲文本對齊中心，並分別將H1和P標記分別設置爲內嵌塊。

這個想法是將兩個元素（H1和P）顯示爲內嵌塊元素，所以內容居中，透明PNG在背景中顯示文本的長度。

但我遇到的問題是，有內嵌塊的元素意味着他們會出現在彼此旁邊（我不希望發生這種情況），所以我設置P標記爲塊元素，但它導致了透明PNG是一樣寬。

enter image description here

HTML: 
<div id="hero"> 
     <div class="container"> 
      <div class="row"> 
       <div class="span12" id="hero-text"> 
        <h2>Heading line</h2> 
        <p>Paragraph line goes here</p>        
       </div> 
      </div> 
     </div> 
</div> 

CSS 

#hero { 
height: 435px; 
width: 100%; 
background: url(../img/hero-image.png) 0 0 no-repeat; 
background-color: #999; 
position: relative; 
color: #FFF; 
border-bottom: 3px solid #E6E6E6; 
} 


#hero-text { 
position: absolute; 
top: 33%; 
text-align: center; 
} 

#hero h2 { 
font-size: 4em; 
font-style: normal; 
line-height: 50px; 
padding-top: 10px; 
background: url(../img/bg-heading.png) repeat; 
display: inline-block; 
padding: 10px 20px; 
} 

#hero p { 
font-size: 2em; 
line-height: 30px; 
display: block; 
background: url(../img/bg-heading.png) repeat; 
padding: 10px 20px; 
}

任何幫助表示讚賞。

來源

2013-07-25 Andy

內聯塊的全部內容是使它們內聯流動。如果您希望塊堆疊，請勿使用內聯塊。 – BoltClock

我得到了內聯塊的要點。我想我正在尋找一種顯示設置，它結合了內聯塊的一些屬性（所以透明PNG只有文本長度和div中心）和塊（以便它們堆疊）。 – Andy

這實際上比我原先想象的更難解決。我可以爲你找到兩個選擇。如果你不想改變你的標記：

賦予這兩個#hero H2和#hero p顯示中的：inline-block的，並給他們寬，以便它們的聯合寬度大於100％。它們都可以是寬度：51％，或者一個可以比另一個寬，只要它們的總數大於父寬度即可。這將導致p破壞到一個新的行。見http://codepen.io/anon/pen/cjDiH或

2.如果你希望自己的寬度是液體，我會在H2和P上顯示之間添加元素：塊。我添加了hr，然後拿走了它的邊距，填充和邊框，使其不可見，除了導致換行外。請參閱http://codepen.io/anon/pen/AGDti

來源

2013-07-25 19:42:07

Thanks.First選項會導致透明PNG擴展到H1或P標籤的全部寬度，因爲我希望透明png只與文本長度一樣寬。第二個選項有效（儘管純粹主義可能會反對純粹用於演示目的的html元素）。如果沒有其他事情發生，我會接受這個答案。再次感謝。 – Andy

這樣的額外標記也讓我畏縮不已。但是，我真的想不出一種方法來避免它，但是，如果你想使用內聯塊（所以你可以利用文本對齊：中心技巧），你不想給顯式寬度元素。 –

我看到你想出了讓他們像你的截圖一樣疊加。

現在，

嘗試在你的CSS添加到width: auto;#hero p。

來源

2013-07-25 17:48:05 Nick

對不起，將寬度設置爲自動不起作用。 p標籤與h2一致。 – Andy

如何堆疊內嵌塊元素

回答

相關問題