How to Vertically Align List Item Text

christineAdministrator Guides, SharePoint, Templates & DownloadsLeave a Comment

Have you ever noticed that when you add multiple lines of text columns to a list view that the formatting gets a little wonky? If you’d like to get your text all aligned and centered (say with photo thumbnails), paste this CSS into a hidden content editor web part on the page:

<style>
.ms-vb, .ms-vb2, .ms-vb-user, .ms-vb-tall, .ms-pb, .ms-pb-selected {
vertical-align:middle;
</style>

This was used in the the “How to Color-Code a SharePoint List” guide, for instance, because the vertical alignment of the text columns wasn’t quite right. Works like a charm! Here’s an example list item from a status tracking list (name blurred for privacy). Prior to the CSS addition, all text was aligning to the top side of the status apple… which was a little awkward.

status-tracking-sharepoint

Leave a Reply

Your email address will not be published. Required fields are marked *