Block in the middle of the page. Horizontal and vertical alignment of elements

Twitter

If you cut into any website created on the basis of html, then you will see a certain layered structure. Moreover, its appearance will be similar to a layer cake. If it seems like this to you, 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 length of the code and low loading speed.

When using table layout, the web page will not be displayed until it is completely loaded. While when using div blocks, the elements are displayed immediately.

In addition to high loading speed, block construction of a website allows you to reduce the amount of html code several times. 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 either. 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. So we need a better way to center the div.

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 Central 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; )

A short description of the css properties and their values that we used in this example to center a div within 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 when laying out various types of menus. 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 link to the value of a block element. And so that the entire height of the div block becomes 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 for the main 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 is the magic button. Clicking on it will hide or show the hiding block.

In this example, the location of the div blocks does not change in any way. This uses a simple JavaScript function that changes the value of the css display property after the button is clicked (onclick event).

Task

Align a block element of a given width to the horizontal center of the web page.

Solution

By default, a block element's width is set to auto , and it will typically take up the entire available width. Therefore, using the described method, you can center align only an element whose width is explicitly specified in percentages or pixels. After that, you should add a margin to the layer style on the left (style property margin-left ) and on the right (margin-right ) with the value auto . However, you can also use the universal margin property with the value auto (example 1).

Example 1: Aligning a layer to the center

HTML5 CSS 2.1 IE Cr Op Sa Fx

Align the layer to the center .center ( width: 200px; /* Width of the element in pixels */ padding: 10px; /* Margins around the text */ margin: auto; /* Align to the center */ background: #fc0; /* Background color */ ) The length of the vector reverses the positive double integral.

The result of the example is shown in Fig. 1.

Today is a lesson on center alignment of divs using CSS technology.

There are several points here that are not entirely easy to understand. I would like to focus on one of them today.

When blocks flow in a normal flow, aligning one, centered, relative to the parent block in which it is located is not particularly difficult.

For this, standard CSS construction is used.

But what should you do if the block that needs to be aligned to the center has an absolute (absolute) or fixed position (fixed). This situation sometimes happens.

Those. in this case, our example takes the following form.

position:relative; - it was added to the parent block so that the counting comes from it, and not from the tag

position:absolute; - in fact, absolute positioning itself.

After the manipulation, margin:auto stops working.

What should I do? How can I re-align the block to the center?

Today I will talk about a trick that is used in this case. It's actually quite simple, you just need to add two CSS properties for the aligned block.

left:50%; - shift the block relative to the parent by 50% to the left.

margin-left:-150px; - because The counting starts from the upper left edge of the block, then for complete evenness, half of the block needs to be shifted to the left, which we do with a negative indent.

If the block width is specified as a percentage, then the solution could be as follows:

If you need to center a line of text:

Line of text

The point is that when a block is assigned a property with position:absolute. The width of the block with the default width:auto value becomes equal to the content. Therefore the text-align property will not work. For everything to start working, you need to force the width to 100%.

Horizontal alignment of content, which has the float property, can be done very easily and is also completely cross-browser (works in Opera 8+, Firefox 3+, IE 5.5+).

Example of div block alignment

To align a float block or multiple blocks in a row, you need another outer block. The outer block and inner blocks are assigned position: absolute; and float: left; , assign external left: 50%; , and for internal blocks right: 50%; . To use float: right; need to assign external assign right: 50%; , and for internal blocks left: 50%; . I recommend clearing floats by placing a block with the clear: both; property after the center-aligned elements. .

This way you can achieve the following centering:

The inner block with id = block-inner has a green border, the outer block with id = block has an intermittent red border.

Block content

#block ( position: relative; float: left; left: 50%; border: 1px dashed #a00; ) #block-inner ( position: relative; float: left; right: 50%; border: 2px solid #0a0; padding : 10px; ) #page ( overflow: hidden; )

Example of menu item alignment

In practice, the above example can be applied when horizontally aligning a site menu. However, you need to take into account that with a sufficiently large number of items (occupying more than half the page in width), horizontal scrolling appears. To get rid of it, you need to apply the overflow property in the external block. If the menu is a drop-down menu, then its drop-down items can be cut off by this external block. To avoid this problem, you need to apply the overflow property to a block that is as enclosing as possible, for example, the outermost block that frames the entire content of the page.

For example, you can align the menu like this:

Items li of the ul list have a green border, and the ul list has a dashed red border.

The HTML code for the example below looks like this:

The CSS code for the example below looks like this:

#menu ( position: relative; float: left; left: 50%; border: 1px dashed #a00; list-style: none; margin: 0; padding: 0; ) #menu li ( position: relative; float: left; right: 50%; border: 2px solid #0a0; padding: 10px; ) #page ( overflow: hidden; )

So it's pretty simple. I wish you success in mastering new methods.

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 that 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. Aligning 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%); 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; )