What is DIV

The name of the element comes from the English word division, which means division. When writing markup, it is used to break elements into blocks. DIVs enclose groups of content on a web page. For example, images, paragraphs with text. The tag does not affect the display of content in any way and does not carry any semantic load.

DIV supports all global attributes. But for web design, you only need two - a class and an id. You will remember about all the rest only in exotic cases, and that is not a fact. The align attribute, which used to be used to center or left align a div, is deprecated.

When to use DIVs

Imagine that the site is a refrigerator, and DIVs are plastic containers by which you need to sort the content. You will not put fruit in the same container with liverwurst. Each kind of product you put separately. Web content is generated in a similar way.

Open any site and divide it into semantic blocks. Header at the top, footer at the bottom, main text in the center. On the side, there is usually a smaller column with promotional content or a tag cloud.

Now disassemble each section in more detail. Start with header. The site header has a separate logo, navigation, first-level heading, and sometimes a slogan. Assign your own container to each semantic block. This will not only separate the elements in the flow, but also make it easier to format them. It will be much easier for you to center the object in the DIV tag by giving it a class or ID.

Center Align DIV with Margins

When rendering web elements, the browser considers three properties: padding, margining, and border. padding is the space between the content and its border. Margin - fields separating one object from another. Border are lines along the blocks. They can be assigned at once from all or only from one side:

These properties add free space between objects, and also help them align and place as desired. For example, if a block with a picture needs to be offset from the left edge to the center by 20%, you assign a margin-left to the element with a value of 20%:

Block-with-img( margin-left: 20%; )

Elements can also be formatted using their width values ​​and negative padding. For example, there is a block with dimensions of 200px by 200px. First, assign it an absolute position and move it to the center by 50%.

Div( position: absolute; left: 50%; )

Now, to make sure the DIV is perfectly centered, give it a negative left padding equal to 50% of its width, i.e. -100 pixels:

margin-left: -100px

In CSS, this is called "air removal". But it has a significant drawback in the need to perform constant calculations, which is quite difficult to do for elements with several levels of nesting. If padding and border-width are set, the browser will by default calculate the dimensions of the container as the sum of the border thickness, the padding on the right, the left, and the content itself, which can also come as a surprise.

So when you need to center a DIV, use the box-sizing property with a value of border-box. It will prevent the browser from adding the padding and border value to the overall width of the DIV element. To raise or lower an element, also use negative values. But in this case, they can be assigned either to the top or bottom field of the container.

How to center div block using automatic margins

This is an easy way to center large blocks. You simply set the width of the container and the margin property to auto. The browser will place the block in the middle with the same margins on the left and right, doing all the work on its own. As a result, you do not run the risk of getting confused in mathematical calculations and significantly save your time.

Use the auto margin method when developing responsive apps. The key is to give the container a width value in ems or percentages. The code from the example above will center the DIV on any device, including Cell phones, it will take up 90% of the screen.

Alignment via the property display: inline-block

By default, DIV elements are considered block elements and have a display value of block. For this method, you will need to override this property. Suitable only for DIVs with a parent container:

An element with class outer-div is assigned text-align property with a value of center that will center the text inside. But for now, the browser sees the nested DIV as a block object. In order for the text-align property to work, inner-div must be treated as inline. Therefore, in CSS table for the inner-div selector, you write the following code:

Inner-div( display: inline-block; )

You change the display property from block to inline-block.

transform/translate method

Cascading Style Sheets allow you to move, skew, rotate, and transform web elements at will. For this, the transform property is used. The desired type of transformation and degree are specified as values. In this example, we will work with translate:

The translate function moves an element from its current position left/right and up/down. Two values ​​are passed in parentheses:

• degree of horizontal movement;
• degree of vertical movement.

If the element needs to be moved only along one of the coordinate axes, then you specify after the word translate the name of the axis and, in parentheses, the amount of the required shift:

Transform: translateY(-20%);

In some guides, you can see transform with vendor prefixes:

webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); transform: translate(50%, 50%);

In 2018, this is no longer necessary, the property is supported by all browsers, including Edge and IE.

In order to center the DIV we need, the translate CSS function is written with a value of 50% for the vertical and horizontal axes. This will cause the browser to move the element from its current position to half its width and height. The width and height properties must be specified:

Keep in mind that the element to which the transform property is applied moves regardless of the objects surrounding it. On the one hand, this is convenient, but sometimes moving, DIV can overlap another container. Therefore, this method of centering web components is considered non-standard and is used only in cases of emergency. Transformations according to all CSS canons are used for animation.

Working with Flexbox layout

Flexbox is considered in a complicated way web layout layouts. But if you master it, you will understand that it is much easier and more enjoyable than standard ways formatting. The Flexbox specification is a flexible and incredibly powerful way to handle elements. FROM of English language The name of the module is translated as "flexible container". Values ​​of width, height, arrangement of elements are adjusted automatically, without calculating indents and margins.

In the previous examples, we already worked with the display property, but set it to block (block) and inline (inline-block) values. To create flex layouts, we will use display: flex. First we need a flex container:

To convert it to a flex container in cascading tables, we write:

Flex-container( display: flex; )

All objects nested in it, but only direct children, will be flex items:

If a list is placed inside a flex container, then the items in the li list are not considered flex items. Flexbox layout will only work on ul:

Rules for placing flex items

To manage flex items, you need justify-content and align-items. Depending on the values ​​you specify, these two properties automatically position objects as needed. If we need to center all nested DIVs, we write justify-content: center, align-items: center and nothing else. The browser will do the rest of the work:

To center text on DIVs that are flex items, you can use the standard text-align trick. Or you can also make each nested DIV a flex container and manage the content with justify-content . This method is much more rational if it contains a variety of content, including graphics, other nested objects, including multilevel lists.

Each 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 many interesting, but few practical options, which is why you have to waste extra time to highlight the main thing. I decided to submit this information in the 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 boxes that have a known height (for vertical alignment) or width (for horizontal alignment).

Alignment with padding

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

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

Aligning Absolutely Positioned Blocks

If the block is set to " position: absolute", then it can be positioned relative to the nearest parent with "position: relative". For this, all properties (" top","right","bottom","left") of the inner block to assign the 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) must not exceed the size of the parent block. It is safer to set the left (right, bottom, top) properties to 0 (zero).

Horizontal alignment

Alignment with "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 align horizontally. For multiline text this solution is used extremely rarely, more often this option can be found for aligning spans, links or pictures.

Once I had to invent text to show how text alignment works when CSS help but nothing interesting came to mind. At first I decided to copy a nursery 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 here - after all, the point is not with him, but the point is in alignment.

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

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

Aligning blocks with margins

Block-level elements with a known width easily align horizontally by setting them to "margin-left: auto; margin-right: auto". The abbreviation is usually used: " margin: 0 auto" (instead of zero, there can be any value). But for vertical alignment, this method will not work.

This is how it is worth aligning all blocks, where possible (where fixed or absolute positioning is not required) - it is the most logical and adequate. While this seems obvious, I've occasionally seen intimidating examples with negative indents, so I thought I'd clarify.

Vertical alignment

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

Alignment with the line-height property

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

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

The wrapper block must have "font-size: 0" set. If you do not set the font size to zero, then the browser will add a few extra pixels of itself. 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 centered. Of course, tabular layout is considered archaic nowadays, but in exceptional cases it can be simulated by specifying " display: table-cell".

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

It should be remembered that if the element has a "float" set other than "none", then it will be block-shaped (display: block) anyway - then you will have to use an additional block wrapper.

Alignment with an additional inline element

And for inline elements, you can apply " vertical-align: middle". In this case, all elements with " display: inline" that are on the same line will align with a common centerline.

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. It is convenient to use pseudo-elements:before or:after for this.

Display: flex and alignment

If you don't care much about Explorer 8 users, or care so much that you're willing to put in a piece of extra javascript for them, then "display: flex" can be used. Flex boxes handle alignment issues really well, and it's enough to write "margin: auto" to center the content inside.

So far, this method has practically never met me, but there are no special restrictions for it.

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

Often in practice it is necessary to solve the problem of grouping and aligning content using CSS. Today we will look at the main ways to arrange elements in a horizontal row.

The material of this article is intended to help novice web designers in mastering the techniques of layout of web pages.

What to choose or methods

There are several ways to arrange structural elements in a row in a horizontal plane. most useful in terms of practical application, are:

• "Float" method
• "Inline block" method
• table-cell method

Each of them has its own advantages, applications and disadvantages. Let's consider them in order.

"For a jerk" or a little theory

All structural HTML elements can be conditionally divided into:

Inline(built-in) - type img, span and the like. We do not have the ability to change their background and give them arbitrary linear dimensions.

Block– occupying the entire width of the parent block, always start with new line – p, h, div.

An illustrative example of inline and block structures is shown below:

Float Method

As already known (see above), a block element is placed on a new line, regardless of the width specified for it ( width). Therefore, reducing the horizontal size div-a, you can’t build blocks in a row.

The most popular (especially among beginner layout designers) solution method is to use the property float.

CSS property float gained great popularity and practical value after the transition from tabular layout to block layout.

Float: left (right) transforms a block-level element into a float, aligns it to the left (right) edge of the parent block, and sets the right (left) wrapping for text and other elements.

For example, let's create four blocks that need to be placed in a row:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >We are building < div class = "bblock" >horizontal < div class = "bblock" >row < div class = "bblock" >from divas

And an external style sheet with the following content:

div(float:left; /*Set wrapping*/ line-height: 120px; font-size: 40px; background: dodgerblue; color:white; margintop: 60px; width: 320px /*Fix the width of the block*/ }

As a result, we get four blocks arranged in a horizontal row and aligned to the left edge of the parent block:

Sometimes in practice it is necessary to align blocks to the right edge of the parent element. Let's change the wrapping around the blocks in the previous example:

float:right;

Pay attention to the inscriptions located in the blocks. At first glance, it may seem that the example worked crookedly. But in fact, the browser processed the code correctly: it read the blocks from top to bottom, and did what we asked of it - right-aligned. Keep this in mind when using the property float: right.

To stop the flow of elements from a specific place, use the line:

< div style= "clear: both;" >

In the above example, we set the distance between the blocks using the indent margin-right. But what if you have a task when laying out the page: place the blocks in a row, center them, and even so that the indents are only between them, but not outside?

The algorithm of actions is the following.

< div class = "wrap" > < div class = "bblock" >We are building < div class = "bblock" >horizontal < div class = "bblock" >row < div class = "bblock" >from divas

wrap(width: 1310px; /*fix the width of the wrapper*/ margin: 0 auto; /*center it*/ background: darkgray; height: 120px; /*Set the height of the wrapper*/) . bblock (float: left; /*Set wrapping*/ line-height: 120px; /*Row height + vert. text centering*/ font-size: 40px; background: dodgerblue; color:white; width: 320px /*Fix the width of the block*/ margin-right: 10px; text-align: center; /*Center the text horizontally*/) . wrap : last-child ( margin-right: 0px; /*Remove the margin of the last div*/ }

As a result, we get the following picture:

Well, you can’t consider all practical situations, so let’s move on to general features.

Important!!!

Inline block method

Both inline and block elements have their advantages and disadvantages in the context of each specific task being solved. But what if we combine their advantages?

Meet the highlight of the program - property display: inline-block.

display: inline-block generates a block-inline element, which is essentially inline, but retains block properties - allows you to change linear dimensions, set margins, indents, etc.

An inline block element has the following properties:

• the height and width of the block is determined automatically by the content and padding value ( padding)
• block height and width can be fixed
• There is no border collapsing effect.

Consider an example of creating a simple navigation menu A containing an image and a link.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Menu 1 link is longer than usual < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Menu link 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Menu link 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Menu link 4

Nav ( display: inline-block; /*Set block-line display*/ width: 180px /*set block width*/ background: dodgerblue; ) . string(text-align: center; /*Align the text horizontally*/ }

As a result, we get the following menu:

As you can see, it turned out crooked ... But we do not intend to get upset, so we apply the CSS property to our divs vertical-align(see below for details):

vertical-align: top;

Our navbar is now aligned to the top line:

Of course, the given example is primitive, but I am sure that based on it you can create a real masterpiece!!!

Important!!!

• For the ancients versions of Firefox add a line:
  

  display: -moz-inline-stack;

  
  and wrap the element in an additional div wrapper.
• IE 7 and earlier - add lines:
  

  zoom: 1 /*set hasLayout*/ * display: inline; /*asterisk - hack for IE */ _height: 250px; /*min-height doesn't work in IE6*/

• I note that specific browsers react selectively to these lines (Firefox to the first one, IE to the rest).

Table Method

Tabular Approach for a long time was the layout standard, which was primarily due to the simplicity and intuitiveness of the markup. Most likely, this is what caused the appearance of table formatting in CSS.

Properties display: table (table cell, inline-table), allow you to perform tabular formatting of elements without HTML applications tables.

For horizontal placement of blocks, we need a parent element that has the property display: table, and child elements (cells) that have the property display: table-cell:

< div class = "wrap" > < div class = "bblock" >We are building < div class = "bblock" >tabular < div class = "bblock" >row < div class = "bblock" >from divas

Bblock ( display: table- cell; font- size: 32px; width: 200px; height: 200px; background: gold; text- align: center; vertical- align: middle; ) . wrap ( display: table; border- spacing: 20px 20px; background- color: darkgray; )

Important!!!

1. Unlike the "inline-block" and "float" methods, when the width of the web browser window is reduced, the cells do not move down.
2. You do not have the ability to set the margin property for pseudo-table cells.
3. Cross browser. Properties from the display: table* family are not supported by IE6, IE7. Also, in IE8 you may see a dynamic rendering error of pseudo-table elements as randomly disappearing cells. This error most often manifested during the initial drawing of the document

Good day, subscribers and readers of this publication. Today I want to go into details and tell you how to center text in css. In some previous articles, I indirectly touched on this topic, so you have some knowledge in this area.

However, in this post, I will tell you about all sorts of ways object alignment, and explain how to indent and redline paragraphs. So let's get started learning!

Html and its offspring and align

This method is almost never used, as it was supplanted by the cascading style sheet tools. However, knowing that such a tag exists won't hurt you.

As for the validation this term described in detail in the article ""), then the html specification itself condemns the use < center>, since for validity it is necessary to use a transitive DOCTYPE>.