Check out our Angular Book Series.

Aligning Left Text, Center Text, and Right Text with CSS

I was building out an application for a client who wanted pagination on some tabled data. I needed to create a pagination bar that included a previous button on the left, a next button on the right, and a message in the center. In the old days I could implement something like this using tables, however I wanted to see if there was a CSS way to get the same layout. I found two separate, but great, implementations of this. This blog post will explain both of them.

Aligning Text with Float

My first attempt to implement this was to use the CSS float property. The float means that text moves out of its normal place in the container, usually moving to the left or right of the container. I could float some text to the right, some text to the left and keep some in the middle. Here is the CSS Style for left aligned text:


.leftAligned {
float : left;
}

This puts left aligned text to the left side of the div to contain our pagination header. Right aligned text is similar:


.rightAligned{
float : right;
text-align : right;
}

The float argument is specified as right so the rightAligned block will move to the right of the container. I also specified a text-align property to move the text all the way over to the right within the rightAligned container.

Finally, we need centered text:


.centeredText {
margin: 0 auto;
text-align : center;
}

This margin property is used to make sure that the centeredText can align right up against the right and left segments.

Use these in HTML:


<div>
<div class="leftAligned">Previous/div>

<div class="rightAligned">Next</div>
<div class="centeredText">Displaying 10-20 of 50</div>
</div>

Reviewing the code, you need to put the left and right aligned divs first, and the centered text last. This bugged a bit of my OCD, but worked almost perfectly.

Play with the code here. The Plunker sample uses some Angular code to simulate the forward and next navigation for sample purposes.

As the user was paginating through the data the previous and next links might disappear. When that happened the centered text would change spots. This wouldn't do. We could fix that by adding explicit widths to each div, which worked for the sample application. However my real world app was having problems with that, I believe due to other CSS conflicts. So, I went searching for a second way to accomplish this layout.

Aligning Text with CSS Tables

My second approach to was to use CSS Tables. You can use the display property in CSS to specify table, or table row or table cell.

First, create a table:


.table {
display:table;
width : 100%;
}

The table CSS style specifies the display type as table and width of 100%. This parallels the HTML table tag.

Next, create a table row:


.tr {
display:table-row;
width : 100%;
}

The table row specifies the display type as table-row. This parallels the HTML tr tag.

Now, the left-aligned text:


.leftAligned {
display:table-cell;
width : 25%;
}

The left aligned text specifies table-cell as the display type. The width is given as 25%. Next, the right aligned cell:


.rightAligned {
display:table-cell;
text-align : right;
width : 25%;
}

The right aligned table cell specifies table-cell as the display. It also right aligns the text with the text-align property and specifies the cell width as 25%.

Finally, create the centered text:


.centeredText {
display:table-cell;
text-align : center;
width : 50%;
}

The centered text also has a table-cell type. It also specifies the text-align to center the text; and the width is 50%. The three table cells have a combined width of 100%.

Finally, we need to create the table in the HTML. We'll use divs as the controllers. First, create the table div:


<div class="table">
</div>

Inside of that, put a table row:


<div class="tr">
</div>

Now put the main content inside the table row:

Previous
Displaying 11-20 of 50
Next

Play with the Code Here. As with the previous sample, this uses some AngularJS magic to make the forward and next buttons work.

Final Thoughts

I was surprised at how hard it was to find resources to explain how to do this, so hopefully this helps someone. Both approaches work well, depending what you're doing. The limitation of the second approach--which is specifying table widths--is that if you have text that is expanding or contracting to unknown widths you may have odd layouts as the text grows beyond their containers. But, I'm sure that can be worked around if you run into the problem.

Sign up for DotComIt's Monthly Technical Newsletter

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.