文字竖直居中 html,CSS 文字垂直居中

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

HTML

这是要居中的文字

CSS 给要居中元素设置一个伪元素

.son{

height: 50%;

background: blue;

color: #fff;

}

.son::before{

display: inline-block;

content: "";

height: 100%;

vertical-align: middle;

}

伪元素文字垂直居中

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

HTML

这是要居中的文字

CSS

.son{

height: 100px;

background: blue;

line-height: 100px;

color: #fff;

}

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

HTML

这是要居中的文字

CSS

.son {

display: table-cell;

height: 100px;

background: blue;

color: #fff;

vertical-align: middle;

}

文字竖直居中 html,CSS 文字垂直居中相关推荐

QT 设置QLabel文字竖直居中
QT 设置QLabel文字竖直居中设置水平居中是Qt::AlignCenter或Qt::AlignHCenter,竖直(vertical)是Qt::AlignVCenter. myLabel -&g ...
html文字竖直书写,css 文字竖直居中的写法和图片垂直居中代码(图文)
界面上文章左右居中使用text-aligin:center,上下竖直居中的写法如下, 图片垂直居中的代码文字.图片居中显示的方法 .content{ height: 40px; line-heigh ...
highcharts特殊定制：x轴文字竖直显示（兼容各浏览器）
做项目要用到highcharts画柱状图,可是x轴数据过多,如果文字从左至右显示显得拥挤不堪,于是想竖起显示,于是想到用xAxis的rotation属性,把文字旋转90度,可是这样文字显示虽然是竖直但 ...
Echarts 问题解决 —— 设置图例、提示框上下角标；坐标轴文字过多显示不全、文字竖直一列显示、让坐标轴类目隔一个换一行；
目录 1.设置图例.提示框上下角标 1.1 修改弹框内容的方法 1.2 修改图例文字的方法 1.3 在 rich 中单独设置角标 1.4 实战 2.坐标轴文字过多显示不全 2.1 方法一:将坐标轴上 ...
【CSS】一个div在另外一个div中居中显示（水平居中，竖直居中）
一个div在另外一个div中居中显示(水平居中,竖直居中) 方法1: 通过设置子元素绝对定位和margin:auto .parent {position:relative;width:800px;he ...
[html] 写一个水平竖直居中的弹窗，带遮罩层的布局
[html] 写一个水平竖直居中的弹窗,带遮罩层的布局 <div class="container"><div class="modal"&g ...
浮动—春联（文字竖直排列）
<div id="main"><div class="top">李白</div><div class="le ...
ScrollView文字竖直滚动
这几天研究了下文字的竖直滚动,是用ScrollView实现的,按下"启动"按钮,开始滚动,按下停止"按钮",停止滚动首先是Activity, import a ...
word文字怎么竖向排列_word文档如何将文字竖着排列？word文字排列技巧
我们平时排版word文档的时候文字基本都是横着排列的,可是对于一些个性化的卡片.封面设计,我们需要将文字竖着排列才好看.可是,很多人都不懂word如何将文字竖着排列.如果是通过不停地按回车键来将文字竖 ...

文字竖直居中 html,CSS 文字垂直居中

文字竖直居中 html,CSS 文字垂直居中相关推荐

最新文章

热门文章