Question

I have something pretty simple I want to do. I’m still working through all the gotchas of CSS, so bear with me. I want to essentially take a div, put it position: absolute; left: 10px; right: 10px; bottom: 10px, then take its children and center them horizontally within the browser. 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;
}

The thing is, I’m using Bootstrap and the alert-message class makes items display: block, so I need to “shrink” them down to normal size (to fit only the size of their contents).

Can anyone help me do this? I simply need to make notificashun-holder be ten pixels from the left, right, and bottom of the browser, and notificashun be only as big as it needs to be and be centered within notificashun-holder.

Answer 1

Since you’re using an inline-block element for the .notificashun, it can be affected by the text-align property, so to make it centered, just apply the text-align: center; property to your .notificashun-holder:

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

    /*New property:*/
    text-align: center;
}