How to make center alignment in css. Vertical alignment of elements using CSS

Often during layout there is a need for vertical alignment of text in a block. If this needs to be done in a table cell, then the value of the vertical-align CSS property is set.

But a reasonable question arises: is it possible to do without a table, without overloading the page layout with unnecessary tags? The answer is “you can,” but due to poor CSS support in the MSIE browser, the solution to the problem for it will be different from the solution for other common browsers.

As an example, consider the following fragment:

div(
border: 1px solid #000;
height: 10em;
width: 10em;
}

Some text

and try to vertically align the text to the center of the block and to the bottom edge of the block.

Solving the problem of “Correct” browsers (including MSIE

Majority modern browsers support CSS2.1, namely the table-cell value for the display property. This gives us the opportunity to force a block of text to appear as a table cell and, taking advantage of this, align the text vertically:

div(
display: table-cell;
vertical-align: middle;
}

div(
display: table-cell;
vertical-align: bottom;
}

Internet Explorer(up to version 7 inclusive)

You can solve the problem of aligning text to the bottom edge of a block in MSIE using absolute positioning (here we will need a string element nested in the block):

div(
position: relative;
}
div span (
display: block;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
}

This set of rules also works in “correct” browsers.

Specify properties

Div span(
display: block;
width: 100%;
}

not necessary, but they may be needed if, in addition to vertical text alignment, you also plan to use horizontal alignment, for example, text-align: center ;.

To vertically align the text to the center of the block, the original fragment will still have to be complicated - we will introduce another line element:

Material to study:

Vertical Centering in CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
Vertical centering using CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
Vertical align (www.cssplay.co.uk/ie/valign.html)
vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
Another method of vertical alignment in CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

If you cut any website created on html based, then a certain layer-by-layer structure will appear in front of you. Moreover, with his own appearance it will be similar to a layer cake. If you think so, then most likely you haven’t eaten for a long time. So first satisfy your hunger, and then we will tell you how to center a div layer on your site:

Advantages of layout using a tag

There are two main types of website structure:

Tabular;
Block.

Tabular layout was dominant even at the dawn of the Internet. Its advantages include the accuracy of the specified positioning. But, nevertheless, it has obvious shortcomings. The main ones are the volume of code and low speed downloads.

When using table layout, the web page will not be displayed until full load. While when using blocks div elements are displayed immediately.

Except high speed loading block construction of the site allows you to reduce the volume several times html code. Including through the use of CSS classes.

However, tabular layout should be used to structure the display of data on the page. A classic example of its use is the display of tables.

Block construction based on tags is also called layer-by-layer, and the blocks themselves are called layers. This is because when certain property values are used, they can be stacked on top of each other, similar to layers in Photoshop.

Positioning aids

In block layout, it is better to position layers using cascading style sheets. The main CSS property responsible for layout is float.
Property syntax:
float: left | right | none | inherit
Where:

left – align the element to the left edge of the screen. The flow around the remaining elements occurs on the right;
right – alignment on the right, flow around other elements – on the left;
none – wrapping is not allowed;
inherit – inherits the value of the parent element.

Let's look at a lightweight example of positioning divs using this property:

#left ( width: 200px; height: 100px; float: left; background: rgb(255,51,102); ) #right ( width: 200px; height: 100px; float: right; background: rgb(0,255,153); ) Left block Right block

Now we will try to use the same property to position the third div in the center of the page. But unfortunately float does not have a center value. And when you give a new block an alignment value to the right or left, it is shifted in the specified direction. Therefore, all that remains is to set float: left to all three blocks:

But this is not the best option. When the window is reduced in size, all layers are lined up in one row vertically, and when the size is increased, they stick to the left edge of the window. Therefore, a more advanced way is needed div alignment in the center.

Centering layers

In the next example, we will use a container layer in which we will place the remaining elements. This solves the problem of blocks moving relative to each other when the window size is changed. Centering the container in the middle is done by setting the margin properties to zero for the margins from the top edge and auto on the sides (margin: 0 auto ):

#container ( width: 600px; margin: 0 auto; ) #left ( width: 200px; height: 100px; float: left; background: rgb(255,51,102); ) #right ( width: 200px; height: 100px; float : left; background: rgb(0,255,153); #center ( width: 200px; height: 100px; float: left; background: rgb(255,0,0); ) Left block Center block Right block

The same example shows how you can center a div horizontally. And if you slightly edit the above code, you can achieve vertical alignment of the blocks. To do this, you just need to change the length of the container layer (reduce it). That is, after editing its css class should look like this:

After the change, all blocks will line up strictly in a row in the middle. And their position will not change regardless of browser window size. Here's what vertically centering a div looks like:

In the following example, we used a number of new css properties to center layers inside a container:

#container ( width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; ) #left ( width: 100px; height: 100px; background: rgb(255,51,102); display: inline-block; vertical-align: middle; margin-left: 35px; ) #right ( width: 100px; height: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( width: 100px; height: 100px; background: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; )

Brief description of the css properties and their values that we used in in this example to center a div inside a div :

display: inline-block – aligns a block element into a line and ensures it wraps around another element;
vertical-align: middle – aligns the element in the middle relative to the parent;
margin-left – sets the left margin.

How to make a link from a layer

Strange as it may sound, this is possible. Sometimes a div block as a link may be needed during layout various types menu. Let's look at a practical example of implementing a link layer:

#layer1( width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) a ( display: block; text-align: center; height: 100%; color: rgb(255,0,51) ; ) Link to our website

In this example, using the line display: block, we set the value of the link block element. And so that the entire height div block became a link, set height: 100%.

Hiding and showing block elements

Block elements provide more opportunities to expand the functionality of the interface than the outdated tabular layout. It often happens that the website design is unique and recognizable. But for such an exclusive you have to pay with a lack of free space.

This is especially true home page, the cost of advertising on which is the highest. Therefore, the problem arises of where to “shove” another advertising banner. And here you can’t get away with aligning the div to the center of the page!

A more rational solution is to make some block hidden. Here is a simple example of such an implementation:

#layer1( display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

This magic button. Clicking on it will hide or show the hiding block.

In this example div location blocks does not change at all. Here it is used simplest function JavaScript that changes the value of the css display property after the button is clicked (onclick event).

As you can see, this property can take on many meanings. Therefore it is very useful and can be used to position elements. In one of the previous examples, we used one of its values (inline-block ) to center a div within a div.

We used two values for the display property to hide and show the layer.

Everyone who deals with layout sooner or later is faced with the need to align elements vertically... and they know what difficulties can arise when aligning an element to the center. In CSS there is a property `vertical-align` with many values which, logically, should perform vertical alignment. However, in practice it doesn't work at all as expected.

There are several techniques to solve this problem. Below we will take a closer look at each of them.

1. Alignment using a table

In this case, we replace the outer block with a single-cell table. The alignment will be applied to the contents of the cell, that is, the inner block.

HTML

CSS

Outer ( width : 200px ; height : 200px ; text-align : center ; vertical-align : middle ; background-color : #ffc ; )

Main disadvantage this decision, from a semantic point of view, the table is not used for its intended purpose. The second disadvantage is that to create a table you need to add another element around external unit.

The first disadvantage can be partially avoided by replacing the table tags with divs and setting the table display mode in CSS.

HTML

CSS

Outer-wrapper ( display : table ; ) .outer ( display : table-cell ; )

2. Alignment using indents

Provided that we know the heights of the inner and outer blocks, the alignment can be set using vertical margins at the indoor block using the formula: (H outer – H inner) / 2.

CSS

Outer (height: 200px;).inner (height: 100px; margin: 50px 0;)

The downside of the solution is the mandatory knowledge of the height of both blocks.

3. Alignment using line-height

If the inner block occupies no more than one line of text, then you can use the line-height property and set it equal to the height of the outer block. Since the content of the inner block should not wrap to the second line, it is advisable to also add the white-space: nowrap and overflow: hidden rules.

CSS

Outer ( height : 200px ; line-height : 200px ; ) .inner ( white-space : nowrap ; overflow : hidden ; )

This method can also be used to align multiline text. To do this, the inner block needs to override the line-height value, and also add the display: inline-block and vertical-align: middle rules.

CSS

Outer ( height : 200px ; line-height : 200px ; ) .inner ( line-height : normal ; display : inline-block ; vertical-align : middle ; )

The disadvantage of this method is that the height of the external block must be known.

4. Alignment using “stretching”

This method can be used when the height of the internal block is known to us, but the external one is not.

To apply this method we need:

Command the external unit relative positioning position: relative , and the inner one is absolute position: absolute ;
Add several top: 0 and bottom: 0 rules to the inner block, as a result of which it will stretch to the entire height of the outer block;
Set the vertical padding of the inner block to auto .

CSS

Outer ( position : relative ; ) .inner ( height : 100px ; position : absolute ; top : 0 ; bottom : 0 ; margin : auto 0 ; )

5. Alignment with negative margin-top

Similar to the previous one, this method used when the height of the outer block is unknown, but the height of the inner block is known.

You need to give the external block relative positioning, and the internal block absolute positioning. Then move the inner block down by half the height of the outer block top: 50% and raise it up by half its own height margin-top: -Hinner / 2 .

CSS

Outer ( position : relative ; ) .inner ( height : 100px ; position : absolute ; top : 50% ; margin-top : -50px ; )

The disadvantage of this method is that the height of the indoor unit must be known.

6. Alignment using transform

The method can be used when the height of the indoor unit is unknown. You need to move the inner block down by half the height of the outer block top: 50% , then use the transform property and move it back up using the translateY(-50%) function.

CSS

Outer ( position : relative ; ) .inner ( position : absolute ; top : 50% ; transform : translateY (-50% ); )

7. Alignment with a pseudo-element

This is the most universal method, which can be used when the heights of both blocks are unknown.

The essence of the method is to add an inline-block with a height of 100% inside the outer block and give it vertical alignment. Thus, the height of the added block will be equal to the height of the outer block. Indoor unit will be aligned vertically relative to the added, and therefore external, block.

In order not to violate semantics, it is advisable to add an inline block using the before or after pseudo-elements.

CSS

Outer :before ( display : inline-block ; height : 100% ; vertical-align : middle ; content : "" ; ) .inner ( display : inline-block ; vertical-align : middle ; )

The disadvantage of this method is that it cannot be used with absolute positioning of the indoor unit.

8. Alignment with Flexbox

The most in a modern way vertical alignment is to use Flexible Box Layout (or Flexbox for short). It allows you to flexibly control the positioning of elements on the page, arranging them almost anywhere. Center alignment for Flexbox is a very simple task.

Generally centering HTML elements on the page - this is not a difficult matter. In some cases... web developers have to rack their brains to find the best solution.

Centering the elements horizontally is not so difficult; vertically it already raises questions, but combining them in general can be perplexing. In the era adaptive design, we are rarely clear about the exact dimensions of certain elements. I counted 6 in various ways centering elements with using CSS. Let's start with simple examples, let's finish with more complex ones. It will work with the same HTML code:

Horizontal alignment using text-align

Sometimes the simplest solution is the best:

Div.center ( text-align: center; background: hsl(0, 100%, 97%); ) div.center img ( width: 33%; height: auto; )

There is no vertical centering here: for this you will need to add the margin-top and margin-bottom properties to the div.

Centering with margin: auto

Another solution for horizontal alignment:

Div.center ( background: hsl(60, 100%, 97%); ) div.center img ( display: block; width: 33%; height: auto; margin: 0 auto; )

Please note that for this method you need to set the display: block property.

Centering using table-cell

By using display: table-cell, we can ensure that the element is centered both vertically and horizontally. But here we need to nest the image in another div element.

Center-aligned ( display: table; background: hsl(120, 100%, 97%);width: 100%; ) .center-core ( display: table-cell; text-align: center; vertical-align: middle; ) .center-core img ( width: 33%; height: auto; )

For everything to work correctly, the div needs to be set to width: 100%. To center the element vertically, we will use standard techniques by setting the height. Works everywhere, including IE8+.

Absolute alignment

A very interesting solution. The idea is that you need to set the height of the outer container:

Absolute-aligned ( position: relative; min-height: 500px; background: hsl(200, 100%, 97%); ) .absolute-aligned img ( width: 50%; min-width: 200px; height: auto; overflow : auto; margin: auto; position: top: 0; bottom: 0;

Center using translate

A new solution that uses CSS transformations. Provides both horizontal and vertical alignment:

Center ( background: hsl(180, 100%, 97%); position: relative; min-height: 500px; ) .center img ( position: absolute; top: 50%; left: 50%; transform: translate(-50 %, -50%); width: 30%; height: auto)

There are several disadvantages:

CSS transform property requires browser prefixes
Doesn't work in older versions of IE (8 and below)
The outer container needs to be given a height.
If there is text inside the container, it may be a little blurry.

Centering using the flex display type

Probably the simplest option.

Center ( background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; ) .center img ( width: 30%; height: auto; )

Doesn't work in all versions of IE (although you can protect yourself by using display: table-cell in addition). Full CSS:

Center ( background: hsl(240, 100%, 97%); display: -webkit-box; /* Safari, iOS 6 and earlier versions; Android, old WebKit */ display: -moz-box; /* Firefox (may be buggy) */ display: -ms-flexbox; /* IE 10 */ display: -webkit-flex; /* Chrome 21+ */ display: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; )

Centering using calc

In some cases, this method is more versatile than using flexbox:

Center ( background: hsl(300, 100%, 97%); min-height: 600px; position: relative; ) .center img ( width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%);

It's very simple, we can calculate the dimensions we need depending on the entire page layout. The calculations are very simple, 50% is the center point of the container, but our task is to place the left top corner images. Next, subtract half the height and width of the image. The formula is as follows:

Top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));

In practice, you may find that this method works fine if we know the dimensions of the elements:

Center img ( width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px - 2)); )

This method is supported by Firefox, starting from version 4, you will need to register browser prefixes. Doesn't work in IE 8. Full code:

Center img ( width: 40%; height: auto; position: absolute; top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%); top: -moz-calc (50% - 20%); left: -moz-calc(50% - 20%); top: calc(50% - 20%);

I hope these methods are enough for you to find the best solution for yourself.

In CSS, some seemingly simple things are not so easy to do. One of these things is alignment, i.e. when one element needs to be positioned in a certain way relative to another.

This article presents some ready-made solutions, which will help simplify the work of centering elements horizontally and/or vertically.

Note: Below each solution is a list of browsers indicating the versions in which the specified CSS code works.

CSS - Center Align Block

1. Align one block to the center of another. In this case, the first and second blocks have dynamic sizes.

... ...

Parent ( position: relative; ) .child ( position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); ; )

Chrome 4.0+
Firefox 3.6+
Internet Explorer 9+
Opera 10.5+
Safari 3.1+

2. Aligning one block to the center of another. In this case, the second block has fixed dimensions.

Parent ( position: relative; ) .child ( position: absolute; left: 50%; top: 50%; /* width and height of 2 blocks */ width: 500px; height: 250px; /* Values are determined depending on its size */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px )