Text Content Alignment with CSS

Content alignment covers many goals in design, ranging from the alignment of each line of text in an element with the left, right, or both left and right edges of the- element’s box to the aligmnent of an entire block element within the browser window. These types of aligmnents are presented here.

1. text-align

The text-align property is inherited and allows you to specify the aligmnent of inline content in its parent block element’s box. The commonly supported values are listed in Table 14.1.

Figures 14.1 and 14.2 show how the property is used and the result. The heading is aligned to the center and the paragraph justified.

1.1. Text Alignment in Design

There are four types of text aligmnent: left, right, center, and justification. Because people read from left to right in Western culture, left alignment makes text easier to read than right or center alignment. It is, therefore, the de facto aligmnent for the Western audience. The reverse is the case with right alignment, which is used where people read from right to left, such as the Middle East, although it is also used simply to express style in design. In contrast, center alignment is not commonly used, mainly because it makes the text difficult to read, due to each line starting and ending at different points, giving the eyes and the brain extra work. Unless it is being used for artistic expression, it should be avoided, particularly for a lot of text. It is quite suitable, however, for short texts like headings, titles, boxed text, and callouts. Justification (forced-justified) is like a combination of left and right aligmnent. Because both sides have to be aligned, the result is that all text lines are stretched to the same length, whether or not there are enough words to fill the length, resulting in uneven word-spacing and gaps (known as rivers) running down the text that make the text difficult to read. It is not commonly used.

2. vertical-align

The vertical-align property is used to specify the vertical alignment of inline box, or table-cell content, rather than the text inside the block-level elements. It is inherited and coimnon to use it with the <img> element to align images within the text. The values it takes are shown in Table 14.2 and Figures 14.3 and 14.4 show examples of how some of them are used and how they render.

3. Centering Blocks of Text

The centering of a block of text can be horizontal or vertical, or both, so that the block is in the middle of the browser window or another container. However, as of time of- writing, there is no single CSS property designed specifically for any of these goals. They can only be accomplished through combining properties. Although they can be accomplished using more recently introduced flexbox properties, which are discussed later in Chapter 19, it is how general-purpose properties can be used that is presented here.

3.1. Horizontal Centering

The most common way of achieving the horizontal centering of a block of text is to add equal margin on either side, and this can be done by giving the margin-left and margin-right properties the value of auto, as shown in Figures 14.5 and 14.6. Note that the two margin declarations can be replaced with the margin shorthand property, thus: margin: 0 auto;.

3.2.  Vertical Centering

Centering a block of text vertically is less straightforward than centering it horizontally. This is because the situation in which it is required detennines how it is done and situations vary widely. This means that there are many methods of vertically centering a block of text. Figure 14.7 shows a moderately generic method and Figure 14.8 the rendered result.

The example essentially uses the position property to position the <div> element at a fixed point 50 □ (halfway) down the window’s height. The transform property takes the translateY(-50%) as value, which moves the <div> element up the y-axis (vertical axis) by half its own height to properly align the middle of the element’s box with the vertical middle of the window. This is because the position property positions an element using the top-left corner and not the center.

3.3. Vertical and Horizontal Centering

Centering a block of text horizontally and vertically can be as simple as combining the CSS rules for achieving each. Figure 14.9 shows how to do this and Figure 14.10 the rendered result.

Implement the example in Figure 14.9 and experiment with the value of the transform property, including the sign. Also say why it is more effective to use % instead of px or em.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

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