CSS水平对齐示例详细介绍

2021-03-09 05:30 jianzhan
在 CSS 中,可使用多种多样特性来水平对齐元素。

对齐块元素

块元素指的是占有所有能用宽度的元素,而且在其前后左右都会换行。

块元素的事例:

拷贝编码
编码以下:

<h1>
<p>
<div>

应用 margin 特性来水平对齐

可根据将左和右外边距设定为 "auto",来对齐块元素。

把左和右外边距设定为 auto,要求的是均等地分派能用的外边距。結果便是垂直居中的元素:

案例

拷贝编码
编码以下:

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

应用 position 特性开展左和右对齐

对齐元素的方式之1是应用肯定精准定位:

案例 

拷贝编码
编码以下:

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

注解:肯定精准定位元素会被从一切正常流中删掉,而且可以相叠元素。

跨访问器适配性难题

当像这样对齐元素时,对 <body> 元素的外边距和内边距开展预订义是1个好主张。这样能够防止在不一样的访问器中出現可见的差别。

当应用 position 特性时,IE8 和更早的版本号存在1个难题。假如器皿元素(在大家的实例中是 <div class="container">)设定了特定的宽度,而且省略了 !DOCTYPE 申明,那末 IE8 和更早的版本号会在右边提升 17px 的外边距。这好像是为翻转条预留的室内空间。当应用 position 特性时,请自始至终设定 !DOCTYPE 申明:

案例

拷贝编码
编码以下:

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

应用 float 特性来开展左和右对齐

对齐元素的另外一种方式是应用 float 特性:

案例

拷贝编码
编码以下:

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

跨访问器适配性难题

当像这样对齐元素时,对 <body> 元素的外边距和内边距开展预订义是1个好主张。这样能够防止在不一样的访问器中出現可见的差别。

当应用 float 特性时,IE8 和更早的版本号存在1个难题。假如省略 !DOCTYPE 申明,那末 IE8 和更早的版本号会在右边提升 17px 的外边距。这好像是为翻转条预留的室内空间。当应用 float 特性时,请自始至终设定 !DOCTYPE 申明:

案例

拷贝编码
编码以下:

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}