How do I align text/images on bottom/right/center/middle of a container using the blueprint css framework?

Question

Is there some easy way to align stuff in div containers to the right or bottom: ```

Text appears on the right side of the layout

``` or: ```

Appears at bottom of container

``` or: ```

Middle of the container

``` Here's a sample of what I'm working with trying to position the "topnav" below: ```

Header

or

...

```

Accepted Answer

Use `position: absolute`. For example:

```
.align-right {
    position: absolute;
    right: 0;
}
/* Or, alternatively, */
.align-right {
    float: right;
}

.bottom {
    position: absolute;
    bottom: 0;
}
.vertical-middle {
    position: absolute;
    top: 50%;
}
```

Note that for `vertical-middle`, this will center the top edge of the content, no the content itself.

Make sure that the containing `DIV` is `position: relative` to force it to become the offset parent (which the position of the children are relative to) EDIT: In other words, add the following rule:

```
.container {
    position: relative;
}
```

How do I align text/images on bottom/right/center/middle of a container using the blueprint css framework?

Solution

Problem