CSS 简明教程 - 垂直和水平对齐属性

yufei       2 年, 4 月 前       337

CSS 布局中,我们可以设置元素的水平和垂直对齐方式,例如垂直和水平居中对齐文本或水平居中图像

设置元素的水平和垂直对齐方式有以下几种:

使用 margin 属性水平居中某个元素

范例

这是一个水平居中的段落


块 ( block ) 元素会独占一行,同时还可以指定其宽度和高度

为了使块元素水平居中,首先指定元素的宽度,以防止元素溢出父容器,然后将 margin-leftmargin-right 属性值设置为 auto,以便元素的两边的边距是相等的

例如上面的范例的源代码如下

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

注意: 如果元素的宽度是 100%,那么它将无法居中,其实已经是居中的,100% 边距为 0 不就是居中么?

注意:在早期的 IE8 或更早的浏览器中,需要设置 <!DOCTYPE> 才能是元素居中

使用 text-align 属性居中文本或图像

左对齐文本
居中对齐文本
右对齐文本

我们可以使用 text-align 属性设置文本或图像左对齐、居中对齐、右对齐元素,就像下面这样

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

如果使用 display:block 属性将图像设置为块级别,那么再使用 text-align 属性设置是无效的,这种情况下,我们只能将图像放置在另一个块级别的元素中,然后设置该元素的 margin-leftmargin-right 属性为 auto 才能达到居中的目的

img {
    display: block;
    margin: 0 auto;
    width: 50%;
}

使用 padding 属性垂直居中

有多种方法可以让一个元素垂直居中,最简单的方式是设置该元素的父元素的 padding 属性,例如

这是一个垂直居中段落
.center {
    padding: 80px 0;
    border: 3px solid green;
}

如果想要一个元素水平居中和垂直居中,那么可以同时设置父元素的 text-alignpadding 属性

水平橘红和垂直居中
.center {
    padding: 80px 0;
    border: 3px solid green;
    text-align: center;
}

使用 line-height 属性垂直居中

除了使用 padding 属性垂直居中外,还可以使用 line-height 属性来垂直居中某个元素

.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;
}

在这种情况下,我们必须设置 height 属性,且 height 属性的值必须和 line-height 相等或者大于或小于 1px

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.