如何堆叠内嵌块元素

Question

是否可以堆叠内嵌块元素？

我有一个DIV，我希望它里面的元素（h1和P）居中。因此，我将DIV设置为文本对齐中心，并将H1和P标记初始设置为内联块。

这个想法是将两个元素（H1和P）显示为内嵌块元素，因此内容居中，透明png在背景中显示文本的长度。

但我遇到的问题是将元素作为内联块意味着它们将彼此相邻（我不希望这种情况发生），所以我将P标记设置为块元素但它导致透明png很宽。

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;
}

感谢任何帮助。

Answer 1

我看到你想出来让它们像你的截图一样堆叠。

现在，

尝试在您的CSS中将width: auto;添加到#hero p。

Answer 2

这实际上比我原先想象的更难解决。我可以为你找到两个选择。如果您不想更改标记：

---

1. 同时给#hero h2和#hero p display：inline-block，并给它们宽度，使它们的组合宽度大于100％。它们都可以是宽度：51％，或者一个可以比另一个宽，只要它们的总数大于父级的宽度即可。这将导致p断开到新行。见http://codepen.io/anon/pen/cjDiH或

2.如果你想让它们的宽度变得流畅，我会在h2和p之间添加一个元素，即display：block。我添加了hr，然后拿走了它的边距，填充和边框使其不可见，除了导致换行。见http://codepen.io/anon/pen/AGDti