CSS Align(alignment)
CSS Horizontal Align (Horizontal Align)
In CSS, there are several properties for horizontal alignment of elements.
Block element alignment
The block element is an element that occupies the full width and is preceded and followed by line breaks.
Example of block element:
<h1>
<p>
<div>
Text alignment, see CSS Text chapter. .
In this chapter, we will tell you how to align block elements horizontally in layout.
Center alignment, use the margin attribute
The block element can set the left and right margins to "automatic" alignment.
Note: Using the margin:auto attribute in IE8 does not work properly unless !DOCTYPE is declared
The margin attribute can be arbitrarily split into left and right margin settings, which are automatically specified. The result is a centered element:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
<p><b>注意: </b>使用 margin:auto无法兼容 IE8, 除非!DOCTYPE已经声明.</p>
</body>
</html> Run instance»
Click the "Run instance" button to view the online instance
Tips: If the width is 100%, Alignment has no effect.
Note: There is a margin processing BUG in block elements in IE5. In order for the above example to work in IE5, some additional code needs to be added. Example
Use the position attribute to set left and right alignment
One of the ways to align elements is to use absolute positioning:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
Note:Absolute positioning and documentation Flow-independent, so they can overlay other elements on the page.
Use the float attribute to set left and right alignment
Using the float attribute is one of the ways to align elements:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Use Padding to set vertical center alignment
A simple way to set vertical center alignment in CSS is to use padding on the top of the head:
I am vertically centered.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>垂直居中</h2>
<p>以上实例，我们使用 padding 属性实现元素的垂直居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>Run instance?
Click the "Run Instance" button to view the online instance
If you want to center both horizontally and vertically, you can use padding and text-align: center:
I am centered horizontally and vertically.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Centering</h2>
<p>以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p>
<div class="center">
<p>我是水平和垂直都居中的。</p>
</div>
</body>
</html>Run instance?
Click the "Run Instance" button to view the online instance
Use line-height to set vertical centering
I am vertically centered.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>
<div class="center">
<p>我是垂直居中的。</p>
</div>
</body>
</html>Run instance?
Click the "Run Instance" button to view the online instance
Use position and transform to set vertical centering
In addition to using the padding and line-height properties, we can also use the transform property To set vertical centering:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
<p>注意: IE8 及更早版本不支持 transform 属性。</p>
</body>
</html>Run the instance?
Click the "Run Instance" button to view the online instance
Tips: For more transform attribute content, please refer to 2D Flip Chapter.
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to predetermine the margin and padding of the element. This is to avoid visual differences in different browsers.
IE8 and earlier have a problem when using float attributes. If a container element (in this case <div class="container">) has a specified width and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin to the right. This appears to be a scrolling reserved space. When using the float attribute, always set it in the DOCTYPE declaration!
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括!DOCTYPE声明!如果丢失,它将会在IE浏览器产生奇怪的结果。</p>
</div>
</body>
</html>Run instance »
Click the "Run instance" button to view the online instance
