- Formatting and aligning text in tables. You can change the font and font attributes of text in a cell, row, column, or table. You can also apply other formatting, such as highlighting, indenting, drop caps and so on. For more information, see “Formatting text.” WordPerfect lets you change the alignment of text in a cell, column, or table.
- How to Align Text in a Microsoft Word Table. With Microsoft Word, you can create an numerous tables that look different from each other. When you start entering text into a table or convert text to a table, Word will automatically align the text to the upper left portion of the cell.
The alignment options let you define the placement of text within a cell on the horizontal axis and on the vertical axis. Select a cell, row, column, or a range. On the Home tab, select Align.
As long as CSS has been around, centering elements vertically has always been a frustrating task for many front-end web developers.
Unlike horizontal alignments, which can be achieved easily using the text-align property, vertical alignments are often much more tricky to put into action.
Nowadays, vertically centering text or any element using CSS is a simple task. This article demonstrates various CSS vertical alignment techniques: Using a Flexbox, using positioning + transform, using vertical padding, and using line-height.
CSS Vertical Align using Flex
Introduced with the CSS3 specification, the display: flex property/value makes it easier to design flexible responsive layout structures without using floats or positioning.
Along with display:flex, you can easily align anything from table cells to inline elements with the align-items, align-self, and justify-content properties.
Click here to view the demo for this technique. For the HTML part, we only need a simple container, so let’s consider the following:
Here is the CSS code for vertically centering the text:
Let’s see how it works:
- On line 4 of the CSS code, I define the display as
flex, which enables the flexbox layout for the container. - Line 5 vertically centers the text in the flexbox, using the
align-itemsCSS property andcenteras a value.
This technique is very reliable and works well in a responsive web design context. Unfortunately, CSS Flexbox isn’t supported by IE9 and earlier versions.
CSS Vertical Align Using The Transform Property
This is an interesting technique, as it allows you to easily center vertically any HTML element: Paragraphs, images, etc.
To make it work, we need two containers in our HTML: The following examples use a div as a parent, and a paragraph containing the text I want to vertically align:
Here’s the related CSS code, that will make our paragraph vertically (and horizontally) centered:
Let’s have a look at the properties used to make it work (You can check out the demo if you want to see this technique in action):
- The
.vertical-alignclass defines a fixed 200px height. This can be changed to fit your site’s needs. Also, note the use ofposition: relative, which is used to prevent display problems of the child element, which has aposition: absolutedefined. - The child element (
.vertical-align p) uses atop: 50%;to display the paragraph at 50% of the parent element’s top. This alone won’t center the content vertically. - The
transformproperty on line 13 is used to compensate the extra space created by bothtopandleft.
This is what I’ve used to make WebDevBlog’s post title and meta vertically centered. It’s a simple, quick and efficient technique. The only problem is that the transform property is not supported in IE8 and earlier versions.
CSS Vertical Alignment Using Vertical Padding
Using padding, we can create a centered text. This technique is very widely used, for example when creating buttons and navigation menu items.
Consider this simple bit of HTML below, or have a look at the demo.
Here is the CSS class we’re using:
As you can see, I specified a top and bottom padding of 2 rems (On line 7). This creates space at the top and bottom of the element, which will look vertically centered.
CSS Vertical Alignment Using Line Height
This technique is very similar to the padding technique explained above. The only difference is that we will be using the line-height CSS property to vertically center our element.
Let’s use the same HTML code we’ve used in the previous example. As before, there’s a demo available for you to test and experiment with this technique.
The CSS code isn’t much different from the one used in the previous example:
In this technique, we have used the line-height CSS property to vertically center the text of a button.
While this technique works well with buttons or navigation items, you have to use it very carefully: If for some reason your text goes on multiple lines, the whole thing will look completely broken. This is why I tend to use the padding technique instead of this when vertically centering text on a button.
CSS Vertical Alignment Using display:table-cell
This technique requires 2 containers, and uses display: table on a parent element and display: table-cell on its child.
This allows you to replicate how text and content are aligned on a HTML table cell. Let’s consider the following HTML code:
Here is the related CSS:
Nothing complicated here: The parent element is assigned a table display, and its child uses display: table-cell. The content of the child element is then vertically centered using the vertical-align: middle property.
If you also need to align the content horizontally, you simply need to use text-align: center on the parent element.
This technique works great in all modern browsers. Please note that display: table and display: table-cell are not supported on IE7 and earlier versions.
Frequently Asked Questions
Can I Vertically Center an Element Using vertical-align?
A common misconception is that the vertical-align: middle CSS property can be used to vertically center an element within its parent. While vertical-align: middle can be used to vertically align the content of a table cell, it won’t work on other elements.
How Do You Center Elements Vertically in CSS?
Depending on the type of element you’d like to vertically align, you can either use a flexbox, transforms, vertical padding or line-height, as detailed in the article.
When you enter some decimal numbers in a Microsoft Word table, the decimal points together with different length of numbers may look messy, and you can hardly tell which one of them is greater and which one is smaller at first glance. But if you can align the decimal points of numbers, all these problems will be solved.
1. First of all, select all the numbers you want to re-align.
2. Go to Home tab and click the small arrow at the bottom right corner of Paragraph section.
3. Hit Tabs… button at the bottom left corner of Indents and Spacing tab.
4. Enter 2 in Tab stop position and choose Decimal under Alignment. Then hit OK to implement all the settings.
Ms Word 2013 Table Cell Vertical Alignment
5. Now the numbers in Word tables have been re-aligned with the decimal points. You can distinguish the amounts in the table much easier.