How to realize horizontal alignment in CSS
This article mainly explains "how to achieve horizontal alignment in CSS". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to achieve horizontal alignment in CSS"!
Align block elements
A block element is an element that occupies the entire available width and wraps around it.
Examples of block elements:
The code is as follows:
Horizontal alignment using the margin attribute
You can align block elements by setting the left and right margins to auto.
Set the left and right margins to auto, specifying that the available margins are evenly distributed. The result is the centered element:
examples
The code is as follows:
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Left and right alignment using the position attribute
One way to align elements is to use absolute positioning:
examples
The code is as follows:
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Note: Absolute positioning elements are removed from the normal flow and can overlap elements.
Cross-browser compatibility issues
When aligning elements like this, it's a good idea to pre-define the margins and padding of the elements. This avoids visible differences between browsers.
There is a problem with IE 8 and earlier when using the position attribute. If the container element (in our case) is set to the specified width and omitted! DOCTYPE states that IE8 and earlier versions increase the margin by 17px on the right. This appears to be space reserved for the scroll bar. When using the position attribute, always set! DOCTYPE Statement:
examples
The code is as follows:
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
Left and right alignment using float attribute
Another way to align elements is to use the float attribute:
examples
The code is as follows:
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
Cross-browser compatibility issues
When aligning elements like this, it's a good idea to pre-define the margins and padding of the elements. This avoids visible differences between browsers.
There is a problem with IE 8 and earlier versions when using the float attribute. If omitted! DOCTYPE states that IE8 and earlier versions increase the margin by 17px on the right. This appears to be space reserved for the scroll bar. When using the float property, always set! DOCTYPE Statement:
examples
The code is as follows:
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
At this point, I believe that everyone has a deeper understanding of "how to achieve horizontal alignment in CSS", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!
