When laying out a page, it is often necessary to perform center alignment using the CSS method: for example, centering the main block. There are several options for solving this problem, each of which sooner or later has to be used by any layout designer.

Center text alignment

Often, for decorative purposes, it is necessary to set the text to center alignment; CSS in this case allows you to reduce layout time. Previously, this was done using HTML attributes, but now the standard requires text to be aligned using style sheets. Unlike blocks, for which you need to change the margins, in CSS alignment Centering the text is done using one line:

• text-align:center;

This property is inherited and passed on from the parent to all descendants. Affects not only the text, but also other elements. To do this, they must be inline (for example, span) or inline-block (any blocks that have the display: block property set). The latter option also allows you to change the width and height of the element and adjust the indents more flexibly.

Often on pages, align is assigned to the tag itself. This immediately invalidates the code, since the W3C has deprecated the align attribute. Using it on a page is not recommended.

Aligning a block to the center

If you need to set div alignment centered, CSS can offer a rather convenient way: using margins. Indents can be set for both block elements and inline-block elements. The property value should be 0 (vertical padding) and auto (automatic horizontal padding):

• margin:0 auto;

Now this option is recognized as absolutely valid. Using external padding also allows you to set the image to be centered: it allows you to solve many problems related to the positioning of an element on the page.

Align a block left or right

Sometimes CSS center alignment is not required, but you need to place two blocks side by side: one on the left edge, the other on the right. For this there is float property, which can take one of three values: left, right or none. Let's say you have two blocks that need to be placed side by side. Then the code will be like this:

• .left (float:left;)
• .right(float:right)

If there is also a third block, which should be located under the first two blocks (for example, a footer), then it needs to be given the clear property:

• .left (float:left;)
• .right(float:right)
• footer (clear:both)

The fact is that blocks with the classes left and right fall out of the general flow, that is, all other elements ignore the very existence of aligned elements. The clear:both property allows the footer or any other block to see elements that have fallen out of the flow and prohibits float on both the left and right. Therefore, in our example, the footer will move down.

Vertical alignment

There are times when it is not enough to set the center alignment using CSS methods; you also need to change the vertical position of the child block. Any inline or inline-block element can be nested at the top or bottom edge, in the middle of a parent element, or in any location. Most often, the block needs to be aligned to the center; for this, the vertical-align attribute is used. Let's say there are two blocks, one nested inside the other. In this case, the inner block is an inline-block element (display: inline-block). You need to align the child block vertically:

• top alignment - .child(vertical-align:top);
• center alignment - .child(vertical-align:middle);
• bottom alignment - .child(vertical-align:bottom);

Neither text-align nor vertical-align affects block elements.

Possible problems with aligned blocks

Sometimes centering a div using CSS can cause a little trouble. For example, when using float: Let's say there are three blocks: .first, .second and .third. The second and third blocks lie in the first. The element with class second is left aligned, and the last block is right aligned. After leveling off, both fell out of the flow. If the parent element does not have a height set (for example, 30em), then it will no longer stretch to the height of its child blocks. To avoid this mistake, use a “spacer” - special block which sees .second and .third. CSS code:

• .second(float:left)
• .third(float:right)
• .clearfix(height:0; clear: both;)

The pseudo-class:after is often used, which also allows you to return the blocks to their place by creating a pseudo-spacer (in the example, a div with the container class lies inside.first and contains.left and.right):

• .left(float:left)
• .right(float:right)
• .container:after(content:""; display:table; clear:both;)

The above options are the most common, although there are several variations. You can always find the simplest and most convenient way to create a pseudo-spacer through experimentation.

Another problem that layout designers often encounter is the alignment of inline-block elements. A space is automatically added after each of them. The margin property, which is set to a negative indent, helps to cope with this. There are other methods that are used much less frequently: for example, zeroing. In this case, font-size: 0 is written in the properties of the parent element. If there is text inside the blocks, then in the properties of inline-block elements it is already returned right size font. For example, font-size:1em. This method is not always convenient, so the option with external indents is much more often used.

Aligning blocks allows you to create beautiful and functional pages: this includes the layout of the overall layout, the arrangement of products in online stores, and photographs on a business card website.

Every layout designer is constantly faced with the need to align content in a block: horizontally or vertically. There are several good articles on this subject, but they all offer a lot of interesting, but few practical options, which is why you have to spend extra time to highlight the main points. I decided to present this information in a form that is convenient for me, so as not to google anymore.

Aligning blocks with known sizes

The easiest way to use CSS is to align blocks that have a known height (for vertical alignment) or width (for horizontal alignment).

Alignment using padding

Sometimes you can not center an element, but add borders to it using the " padding".

For example, there is a picture of 200 by 200 pixels, and you need to center it in a block of 240 by 300. We can set the height and width of the outer block = 200px, and add 20 pixels at the top and bottom, and 50 at the left and right.

.example-wrapper1 ( background : #535E73 ; width : 200px ; height : 200px ; padding : 20px 50px ; )

Aligning Absolutely Positioned Blocks

If the block is set to " position: absolute", then it can be positioned relative to its closest parent with "position: relative". This requires all properties (" top","right","bottom","left") indoor unit assign same value, as well as "margin: auto".

*There is a nuance: The width (height) of the inner block + the value of left (right, bottom, top) should not exceed the dimensions of the parent block. It is safer to assign 0 (zero) to the left (right, bottom, top) properties.

.example-wrapper2 ( position : relative ; height : 250px ; background : url(space.jpg) ; ) .cat-king ( width : 200px ; height : 200px ; position : absolute ; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; margin : auto ; background : url(king.png) ; )

Horizontal alignment

Alignment using "text-align: center"

To align text in a block there is a special property " text-align". When set to " center"Each line of text will be aligned horizontally. For multi-line text, this solution is used extremely rarely; more often this option can be found for aligning spans, links or images.

I once had to come up with some text to show how text alignment works using CSS, but nothing interesting came to mind. At first I decided to copy a children's rhyme somewhere, but I remembered that this might spoil the uniqueness of the article, and our dear readers would not be able to find it on Google. And then I decided to write this paragraph - after all, the point is not with it, but the point is in alignment.

.example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

It's worth noting that this property will work not only for text, but also for any inline elements ("display: inline").

But this text is aligned to the left, but it is in a block that is centered relative to the wrapper.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; )

Aligning blocks using margin

Block elements with a known width can easily be aligned horizontally by setting them to "margin-left: auto; margin-right: auto". Usually the abbreviation is used: " margin: 0 auto" (any value can be used instead of zero). But this method is not suitable for vertical alignment.

.lama-wrapper ( height : 200px ; background : #F1BF88 ; ) .lama1 ( height : 200px ; width : 200px ; background : url(lama.jpg) ; margin : 0 auto ; )

This is how you should align all blocks, where possible (where fixed or absolute positioning is not required) - it is the most logical and adequate. Although this seems obvious, I have sometimes seen scary examples with negative indents, so I decided to clarify.

Vertical alignment

With vertical alignment much more problems- apparently, this was not provided for in the CSS. There are several ways to achieve the desired result, but all of them are not very beautiful.

Alignment with line-height property

In the case when there is only one line in a block, you can achieve its vertical alignment by using the " line-height" and setting it to the desired height. For reliability, it is worth setting also "height", the value of which will be equal to the value of "line-height", because the latter is not supported in all browsers.

.example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; )

It is also possible to achieve block alignment with several lines. To do this, you will have to use an additional wrapper block and set the line height to it. An internal block can be multi-line, but must be "inline". You need to apply "vertical-align: middle" to it.

.example-wrapper5 ( line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : 14px ; line-height : 1.5 ; vertical-align : middle ; background : #FFFAF2 ; color : #FF9B00 ; text-align : center ; )

The wrapper block must have "font-size: 0" set. If you don't set the font size to zero, the browser will add a few extra pixels. You will also have to specify the font size and line height for the inner block, because these properties are inherited from the parent.

Vertical alignment in tables

Property " vertical-align" also affects table cells. With the value set to "middle", the content inside the cell is aligned to the center. Of course, table layout is considered archaic nowadays, but in exceptional cases you can simulate it by specifying " display: table-cell".

I usually use this option for vertical alignment. Below is an example of layout taken from a completed project. It is the picture that is centered vertically in this way that is of interest.

.one_product .img_wrapper ( display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; ) .one_product img ( max-height : 169px ; max-width : 100 %; min-width: 140px; display: block; margin: 0 auto; )

It should be remembered that if an element has a “float” set other than “none”, then it will in any case be block (display: block) - then you will have to use an additional block wrapper.

Alignment with an additional inline element

And for inline elements you can use " vertical-align: middle". Moreover, all elements with " display: inline" that are on the same line will align with a common center line.

You need to create an auxiliary block with a height equal to the height of the parent block, then the desired block will be centered. To do this, it is convenient to use the pseudo-elements:before or:after.

.example-wrapper6 ( height : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; width : 200px ; height : 200px ; ) .riki ( display : inline-block ; height : 100% ; vertical-align : middle ; )

Display: flex and alignment

If you don't care much about Explorer 8 users, or care so much that you're willing to insert a piece of extra javascript for them, then you can use "display: flex". Flex boxes are great at dealing with alignment issues, and just write "margin: auto" to center the content inside.

So far, I have practically never encountered this method, but there are no special restrictions for it.

.example-wrapper7 ( display : flex ; height : 300px ; background : #AEB96A ; ) .example-wrapper7 img ( margin : auto ; )

Well, that's all I wanted to write about CSS alignment. Now centering content will not be a problem!

Vlad Merzhevich

Due to the fact that the contents of table cells can be simultaneously aligned horizontally and vertically, the possibilities for controlling the position of elements relative to each other are expanded. Tables allow you to set the alignment of images, text, form fields, and other elements relative to each other and the web page as a whole. In general, alignment is mainly necessary to establish visual connections between different elements, as well as to group them together.

Vertical centering

One way to show the visitor the focus and name of the site is to use a splash page. This is the first page on which, as a rule, there is a flash splash screen or a picture expressing the main idea of ​​the site. The image is also a link to other sections of the site. You need to place this image in the center of the browser window, regardless of the monitor resolution. For this purpose, you can use a table with a width and height of 100% (example 1).

Example 1: Centering the drawing

In this example, horizontal alignment is set using the align="center" tag parameter , and the contents of the cell may not be centered vertically, since this is the default position.

To set the table height to 100%, you need to remove, the code ceases to be valid.

Using the width and height to cover the entire available area of ​​the web page ensures that the content of the table will be aligned exactly in the center of the browser window, regardless of its size.

Horizontal alignment

By combining the align (horizontal alignment) and valign (vertical alignment) attributes of the tag , it is permissible to set several types of positions of elements relative to each other. In Fig. Figure 1 shows ways to align elements horizontally.

Let's look at some examples of text alignment according to the figure below.

Top Alignment

To specify the top alignment of cell contents, for a tag required to install valign attribute with the value top (example 2).

Example 2: Using valign

Column 1

Column 2

In this example, cell characteristics are controlled using tag parameters , but it’s also more convenient to change through styles. In particular, the alignment in cells is specified by the vertical-align and text-align properties (example 3).

Example 3: Applying styles for alignment

Column 1

Column 2

To shorten the code, this example uses grouping of selectors because the vertical-align and padding properties are applied to two cells at the same time.

Bottom alignment is done in the same way, but instead of the top value, bottom is used.

Center alignment

By default, cell contents are aligned to the center of their vertical line, so if the columns have different heights, you need to set the alignment to the top edge. Sometimes you still need to leave the original alignment method, for example, when placing formulas, as shown in Fig. 2.

In this case, the formula is located strictly in the center of the browser window, and its number is located on the right edge. To arrange the elements in this way, you will need a table with three cells. The outer cells should have the same dimensions, in the middle cell the alignment is centered, and in the right cell - along the right edge (example 4). This number of cells is required to ensure that the formula is positioned in the center.

Example 4: Formula Alignment

(18.6)

In this example, the first cell of the table is left empty; it serves only to create an indent, which, by the way, can also be set using styles.

Aligning Form Elements

Using tables, it is convenient to determine the position of form fields, especially when they are interspersed with text. One of the design options for the form, which is intended for entering a comment, is shown in Fig. 3.

To ensure that the text next to the form fields is right-aligned and the form elements themselves are left-aligned, you will need a table with an invisible border and two columns. The left column will contain the text itself, and the right column will contain text fields (example 5).

Example 5: Aligning Form Fields

Name
Email
A comment

In this example, for those cells where right alignment is required, the align="right" attribute is added. To ensure that the Comment label is positioned at the top of multiline text, the corresponding cell is set to top-aligned using the valign attribute.

There are several fundamentally different ways to center an object vertically using CSS, but choosing the right one can be tricky. We will look at some of them, and also make a small website using the knowledge gained.

Vertical center alignment is not easy to achieve using CSS. There are many ways and not all work in all browsers. Let's look at 5 various methods, as well as the pros and cons of each of them. Example.

1st method

This method assumes that we set some element