Question

我想做一些非常简单的事情。我还在研究CSS的所有问题，所以请耐心等待。我想基本上拿一个div，把它放到position: absolute; left: 10px; right: 10px; bottom: 10px，然后把它的孩子放在浏览器中水平居中。 This is my attempt at doing so：

HTML：

<div class="notificashun-holder">
    <div class="alert-message info notificashun">
        <p>Hello, World!</p>
    </div>
</div>

CSS：

.notificashun-holder {
    display: block;
    bottom: 10px;
    left: 10px;
    right: 10px;
    position: absolute;
}

.notificashun {
    display: inline-block;
    margin: 0 auto;
}

问题是，我正在使用Bootstrap并且alert-message类生成项目display: block，所以我需要将它们“缩小”到正常大小（以仅适合其内容的大小）。

任何人都可以帮我这样做吗？我只需要将notificashun-holder设置为距离浏览器左侧，右侧和底部十个像素，并且notificashun只需要它所需的大小并在notificashun-holder内居中。

Answer 1

由于您inline-block使用.notificashun元素，因此text-align属性可能会影响它，因此要使其居中，只需应用{{1 } {}属性到text-align: center;：

.notificashun-holder

将元素居中放置在绝对定位的元素中

1 个答案: