CSS: Center Text Blocks using margin and fixed-width

At times, in both nonfiction and fiction ebook formatting, you may want to set off an area of text from the rest of the content. The easiest way to center text blocks is to set the margins to ‘auto’ along with a fixed width. Without the fixed width, the block would simply fill the available width of the screen.

Here is an example:

CSS

p.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}

HTML

<p class=”blocktext”> This is a very narrow block of text that is centered….

Center Text blocks: ebook formatting

Modify the width to the exact measurement desired. You can also use a percentage value if desired.

Leave a Reply