css-水平与垂直对齐

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度,并将两边的空外边距平均分配:

div 元素是居中的

实例
==css

1
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }

注意: 如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐,可以使用 text-align: center;

文本居中对齐

 

实例

1
.center { text-align: center; border: 3px solid green; }

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到  元素中: 实例

1
img { display: block; margin: auto; width: 40%; }

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

实例

1
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }

注释:绝对定位元素会被从正常流中删除,并且能够交叠元素。

提示: 当使用 position 来对齐元素时, 通常  元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。 实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}

左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:

实例

1
.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }

当像这样对齐元素时,对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

当使用 float 属性时,IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时,请始终设置 !DOCTYPE 声明:

实例

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

垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:

我是垂直居中。

实例

1
.center { padding: 70px 0; border: 3px solid green; }

如果要水平和垂直都居中,可以使用 padding 和 text-align: center:

我是水平和垂直都居中的。

 

实例

1
.center { padding: 70px 0; border: 3px solid green; text-align: center; }

垂直居中 - 使用 line-height

我是垂直居中的。

 

实例

1
2
3
4
5
6
7
8
9
10
11
12
.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;
}

垂直居中 - 使用 position 和 transform

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中: 实例

1
2
3
4
5
6
7
8
9
10
11
12
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2023 翟天野

请我喝杯咖啡吧~