css: content positioning

This is a wiki page. Be bold and improve it!

If you have any questions about the content on this page, don't hesitate to open a new ticket and we'll do our best to assist you.

How to centre content?

For block elements:
For the following to work, the element must have a set width:

.centre {
         margin: 0 auto;
}

An image is by default an inline element. Make it display as a block:

img.centre {
        margin: 0 auto;
        display: block;                                                                                                                                                    
}

For inline elements like text elements:

figcaption {
        text-align: center;                                                                                                                                                
}

To center an image and a caption within the figure element:
HTML:

<figure>
   <img />
   <figcaption></figcaption>
</figure>

CSS:
figure {
        text-align:center;
}

figcaption {
        display:inline-block;
}