本文共 1201 字,大约阅读时间需要 4 分钟。
1)单行文本的居中
主要实现css代码:
水平居中:text-align:center;
垂直居中:line-height:XXpx; /*line-height与元素的height的值一致*/
有一个div,宽度和高度为300px,背景颜色为黑色,然后在div中有一行简短文字,我们只需要使用line-height:200px;就可以实现文字的居中效果,具体的代码如下所示:
由上图可以看出我们实现了单行文字的垂直居中效果,但是很多时候我们的文字并不知道具体有多少,可能有一行,也可能有很多行,那么遇到多行文字的这种问题我们要如何处理呢。
2)多行文本的垂直居中
对于多行文本的垂直居中我们有很多种实现方式,我们这里逐个的来看一下;
1、使用display:table来实现
主要实现代码:
display: table使块状元素成为一个块级表格;
display: table-cell;子元素设置成表格单元格;
vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果;
具体的html与css的代码就如下所示:
2、使用absolute与transform配合实现
主要实现代码:
position:absolute; 首先给文本绝对定位;
left:50%;top:50%;transform:translate(-50%,-50%); 让文本距离盒子左边和上边分别为50%,再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了。
具体的html与css的代码就如下所示:
3、使用flex实现
主要实现代码:
display: flex;设置 display 属性的值为 flex 将其定义为弹性容器
align-items: center;定义项目在交叉轴(纵轴)上如何对齐,垂直对齐居中
justify-content: center; 定义了项目在主轴上的对齐方式,水平对齐居中
具体的html与css的代码就如下所示:
补充:
行内元素、块状元素、行内块状元素,display可以将其任意转换
(1)display:inline;转换为行内元素(2)display:block;转换为块状元素(3)display:inline-block;转换为行内块状元素
行内元素有:span
行内元素特征:
1. 设置宽高无效;
2. margin仅左右方向有效,上下无效;padding上下左右都有效,会撑大空间;
3. 不会自动进行换行
块状元素有:div、p、等
块状元素的特征:
1. 能够识别宽高;
2. margin和padding上下左右均有效;
3. 可以自动换行
4. 多个块状元素标签写在一起,默认排列方式为从上至下
行内块状元素特征:
1. 不自动换行;
2. 能够识别宽高;
3. 默认排列方式为从左至右;
转载地址:https://blog.csdn.net/yyychocolate/article/details/108034020 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!