【CSS基础】文字垂直居中

文字垂直居中

1、高度为百分比，line-height 不知道设置具体的数值的情况，利用伪元素进行居中

HTML

 <div class="father"><div class="son">这是要居中的文字</div></div>

CSS

.father{height: 300px;width: 300px;background: red;
}
.son {height: 50%;background: blue;color:#fff;
}
.son::before{display: inline-block;content: "";height: 100%;vertical-align: middle;
}

2.高度为具体的数值的情况，line-height 只需要设置具体的高度即可

HTML

 <div class="father"><div class="son">这是要居中的文字</div></div>

css

.father{height: 300px;width: 300px;background: red;
}
.son {height: 100px;line-height: 100px;background: blue;color:#fff;
}

3、利用表格和单元格的特性，让文字垂直居中

HTML

 <div class="father"><div class="son">这是要居中的文字</div></div>

CSS

.father{height: 300px;width: 300px;background: red;
}
.son {display: table-cell;height: 100px;background: blue;color:#fff;vertical-align: middle;
}

【CSS基础】文字垂直居中相关推荐

css图片跟文字居中,css 图片文字垂直居中
先来看张图片相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
html DIV+CSS让文字垂直居中
CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption&g ...
HTML+CSS基础文字和字体
HTML+CSS文字和字体改变 HTML代码: <!doctype html> <html> <head> <meta charset="utf-8 ...
html设置间距颜色,CSS基础—文字的尺寸、字体、行距及颜色
文字的尺寸.字体.行距及颜色样式标签为font-size(尺寸).font-family(字体).line-height(行距).color(颜色). font-size(尺寸) font-size样 ...
【css】文字垂直居中
前言 html在线运行https://www.runoob.com/runcode 方法1:容器高度不固定将容器的padding-top和padding-bottom的值设置成相等的值. <! ...
CSS实现文字垂直居中
一.问题描述: 当高度固定或不固定时,单行或多行文本难以实现垂直居中: 二.解决方法: 1.使用line-height属性,将line-height设置与元素高度等高. 局限性:只适用于单行文本,局限 ...
css设置div内文字垂直,DIV+CSS如何让文字垂直居中？
满意答案 dinahcat 2016.05.08 采纳率:48% 等级:5 已帮助:205人 div+css实现文字垂直居中的五种方法: 1.把文字放到table中,用vertical-alig ...
WEB安全之DIV CSS基础（二）：文字和文本的属性、列表样式和伪类超链接
WEB安全之DIV CSS基础(二):文字和文本的属性.列表样式和伪类超链接) 文字和文本的属性文字属性文本属性列表样式和伪类超链接项目符号列举设置列表项标记超链接文字和文本的属性文字 ...
html不知道高文字垂直居中,css实现固定高度及未知高度文字垂直居中的完美解决方案...
在工做当中咱们常常碰到相似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而咱们最容易会想到使用表格来垂直居中,或者若是是单行文字 ...

【CSS基础】文字垂直居中

文字垂直居中

1、高度为百分比，line-height 不知道设置具体的数值的情况，利用伪元素进行居中

2.高度为具体的数值的情况，line-height 只需要设置具体的高度即可

3、利用表格和单元格的特性，让文字垂直居中

【CSS基础】文字垂直居中相关推荐

最新文章

热门文章