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 Block1. 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; )
Browsers that support this solution:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Aligning one block to the center of another. In this case, the second block has dimensions specified in percentages.
Parent ( position: relative; ) .child ( position: absolute; /* width and height of 2 blocks in % */ height: 50%; width: 50%; /* Values are determined depending on its size in % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ )
Browsers that support this solution:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
1. Aligning one block element (display: block) relative to another (in which it is located) horizontally:
... ...
Block ( margin-left: auto; margin-right: auto; )
Browsers that support this solution:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Aligning a line (display: inline) or line-block (display: inline-block) element horizontally:
... ...
Parent ( text-align: center; ) .child ( display: inline-block; )
Browsers that support this solution:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
1. Center one element (display: inline, display: inline-block) relative to the other (in which it is located) in the center. The parent block in this example has a fixed height, which is set using the CSS line-height property.
... ...
Parent ( line-height: 500px; ) .child ( display: inline-block; vertical-align: middle; )
Browsers that support this solution:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Centering one block relative to another vertically by representing the parent as a table, and the child as a cell of this table.
Parent ( display: table; ) .child ( display: table-cell; vertical-align: middle; )
Browsers that support this solution:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
If you know any other interesting tricks or useful ready-made alignment solutions, then share them in the comments.
Very often in layout it is necessary to center some element horizontally and/or vertically. Therefore, I decided to make an article with different ways centering so that everything is at hand in one place.
Horizontal alignment margin: autoHorizontal alignment using margin is used when the width of the centered element is known. Works for block elements:
Elem ( margin-left: auto; margin-right: auto; width: 50%; )
Specifying auto for the right and left margins makes them equal, which centers the element horizontally within the parent block.
text-align: centerThis method is suitable for centering text within a block. text-align: center:
Alignment with text-align .wrapper ( text-align: center; )
I'm center aligned
position and negative margin leftSuitable for centering blocks of known width. We give the parent block position: relative to position relative to it, the centered element position: absolute , left: 50% and a negative margin-left whose value is equal to half the width of the element:
Alignment with position .wrapper ( position: relative; ) .wrapper p ( left: 50%; margin: 0 0 0 -100px; position: absolute; width: 200px; )
I'm center aligned
display: inline-block + text-align: centerThe method is suitable for aligning blocks of unknown width, but requires a wrapper parent. For example, you can center a horizontal menu this way:
Alignment with display: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )
Vertical alignment line-heightTo align one line of text you can use same values height and line spacing for the parent block. Suitable for buttons, menu items, etc.
line-height .wrapper ( height: 100px; line-height: 100px; )
I'm vertically aligned
position and negative margin upAn element can be aligned vertically by giving it a fixed height and applying position: absolute and a negative margin up equal to half the height of the element being aligned. The parent block must be given position: relative:
Wrapper ( position: relative; ) elem ( height: 200px; margin: -100px 0 0; position: absolute; top: 50%; )
This way, using positioning and negative margins, you can center an element on the page.
display: table-cellFor vertical alignment, the display: table-cell property is applied to the element, which forces it to emulate a table cell. We also set its height and vertical-align: middle . Let's wrap all this in a container with the dislpay: table; property. :
Vertical alignment display: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; height: 100px; vertical-align: middle; )
I'm vertically aligned
Dynamic alignment of an element on a pageWe looked at ways to align elements on a page using CSS. Now let's take a look at the jQuery implementation.
Let's connect jQuery to the page:
I suggest writing a simple function to center an element on the page, let's call it alignCenter() . The element itself acts as an argument to the function:
Function alignCenter(elem) ( // code here )
In the body of the function, we dynamically calculate and assign the coordinates of the page center to the CSS left and top properties:
Function alignCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem. height()) / 2 + "px" // don't forget to add position: absolute to the element to trigger coordinates )) )
In the first line of the function, we get the width of the document and subtract from it the width of the element, divided in half - this will be the horizontal center of the page. The second line does the same thing, only with the height for vertical alignment.
The function is ready, all that remains is to attach it to the DOM readiness and window resize events:
$(function() ( // call the centering function when the DOM is ready alignCenter($(elem)); // call the function when resizing the window $(window).resize(function() ( alignCenter($(elem)); )) // element centering function function alignCenter(elem) ( elem.css(( // calculating left and top coordinates left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))
Application of FlexboxNew CSS3 features, such as Flexbox, are gradually becoming commonplace. The technology helps create markup without using floats, positioning, etc. It can also be used to center elements. For example, apply Flexbox to the parent element.wrapper and center the content inside:
Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 500px; width: 500px; ) .wrapper .content ( margin: auto; /* margin: 0 auto; horizontal only */ /* margin: auto 0; vertical only */ ) Lorem ipsum dolor sit amet
This rule centers the element horizontally and vertically at the same time - margin now works not only for horizontal alignment, but also for vertical one. And without a known width/height.
Related resources Help the projectA designer sometimes has a question: how to center elements vertically? And this causes certain problems. However, there are several methods for centering elements vertically, and each of these methods is quite simple. This article describes some of these methods.
To see each method in action, click on the demo button or on the image.
Let's discuss some of the issues that prevent vertical centering.
Vertical-AlignHorizontally centering an element is fairly easy to implement (using CSS). An inline element can be centered horizontally by giving its parent container a text-align property of center . When an element is a block element, to center it, you just need to set the width (width) and set the values of the right (margin-right) and left (margin-left) margins to auto .
Regarding text: many people are starting to use the vertical-align property for centering. It's logical and my first choice would be the same. To center an element in a table, you can use the valign attribute.
However, the valign attribute only works when applied to a cell (for example, ). The CSS vertical-align property can be applied to a cell and some inline elements.
- The text is centered relative to line-height (line spacing).
- In relation to the table, without going into details, centering occurs relative to the height of the row.
Unfortunately, the vertical-align property cannot be applied to block-level elements, such as paragraph (p) inside div tag.
However, there are other methods for vertically centering elements, and you can still use the vertical-align property where needed. Which method to use depends on what you are going to center.
Line spacing or Line-heightThis method Should only be used when you need to center a line of text. To do this, you need to set the line-height (line spacing) of the element that contains text to greater than the font size.
By default, there is equal space above and below the text, so the text is centered vertically.
In this case, it is not necessary to specify the height of the parent element.
Text here because for validity it is necessary to use the transitional DOCTYPE> .
This type allows prohibited elements to pass through.
CENTER
This content will be centered.
Please note that for the image the attribute we are analyzing has slightly different meanings.
In the example I used align=" middle" . Thanks to this, the image was aligned so that the sentence was located clearly in the middle of the picture.
Centering tools in cssCSS properties designed to align blocks, text and graphic content are used much more often. This is primarily due to the convenience and flexibility of implementing styles.
So, let's start with the first text centering property - text-align.
It functions in the same way as align in . Among the keywords you can choose one of general list or inherit the characteristics of an ancestor (inherit).
I would like to note that in css3 you can set 2 more parameters: start – depending on the rules of writing text (from right to left or vice versa) sets the alignment to the left or right (similar to the work left or right) and end – the opposite of start (when writing text from left to right it works as right, when written from right to left - left).
text-align div ( border: 5px double red; padding: 0 22px 0 22px; ) #l ( text-align: right; ) #s ( text-align: end; )
Sentence on the right
Sentence using end
I'll tell you about a small trick. When justify is selected, the last line may dangle unattractively from the bottom. In order to, for example, position it in the center, you can use the text-align-last property.
To align site content or table cells vertically, use the vertical-align property. Below I have described the main keywords element.
| Keyword | Purpose |
| baseline | Specifies alignment to an ancestor line, called the base line. If the ancestor object does not have such a line, then alignment occurs along the lower border. |
| middle | The middle of the mutated object is aligned to the baseline, to which the height floor of the parent element is added. |
| bottom | The bottom of the selected content adjusts to the bottom of the object below it. |
| top | Similar to bottom, only with top part object. |
| super | Makes the character superscript. |
| sub | Makes the element subscript. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | vertical-align FLOWER |
vertical-align div( font-size: 4em; text-align:center; text-decoration: underline; ) #A(vertical-align: top;) #B(vertical-align: middle;) #C(vertical-align : super;) #D(vertical-align: sub;) FLOWER
IndentationsAnd finally we come to paragraph indents. The CSS language uses a special property called text-indent .
With its help you can make both a red line and a protrusion (you need to specify a negative value).
text-indent #a ( text-indent: 53px; ) #b ( text-indent: -43px; ) div ( background: #FFDAB9; width:35%; font-size:29px; margin-left: 30%; padding -left:50px; )
To create a red line you only need to know one parameter.
This is the simple text-indent property.
I praise those who tried each example in practice. Send links to my blog to your friends and don't forget to subscribe. Good luck! Bye bye!
Best regards, Roman Chueshov
Read: 675 times