【前端】三种方法将文字垂直居中

本文用三种方法实现垂直居中

第一种方法针对单行文字，用line-height实现，即将行间距设置为高度的一半，但是当文字多行时，该方法无效。

第二种方法针对定高多行文字，用<table>实现

第三种方法针对定高多行文字，用display：table实现

以下为代码（该代码实现了当鼠标放到左边的两个div上时，放大一倍，实现方法为在js中将对应的宽高都设置为2倍，并appendChild上去）

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>body{ margin:0; padding: 0; font-size:100px; font-weight: bold }.left{ width:200px; height: 600px; position: absolute; left:0; top:0;}.main{ height: 600px; margin:0 0 0 200px; background: #222; }.left1{background: #EEE0E5;}.left2{background: #EED5D2;}/*单行实现*/.left1,.left2{height: 50%;line-height: 300px;    /*用行间距实现垂直居中,但只适合只有一行的元素，一但元素超过一行，会显示到div外面*/text-align: center;word-wrap:break-word;   /*自动换行*//*overflow:hidden; */   /*超出部分自动隐藏*/font-size: 16px;}/*多行定高,使用标签table*/table{width:100%;height: 100%;}td{width:100%;height: 100%;text-align:center;}/*多行定高，用display实现*/.single {height: 500px;width:100%;display: table;background: #EEE0E5;}.a{display: table-cell;vertical-align: middle;text-align: center;
}</style>
</head><body><div class="left"><div class="left1" id="left1" οnmοuseοver="change(this)" οnmοuseοut="remove(this)">left1</div><div class="left2" id="left2"οnmοuseοver="change(this)" οnmοuseοut="remove(this)">left2</div></div><div class="main"><table><tr><td>table实现垂直居中table实现垂直居中</td></tr></table></div><div class="single"><div class="a">单独的一个div实现垂直居中</div></div><script type="text/javascript" >function change(e){var a='enlarge'+e.id;var x=document.getElementById(a);if(!x){var h=e.clientHeight;var w=e.clientWidth;var c=e.innerHTML;var f=e.fontSize;var b=e.background;var newE=document.createElement("div");newE.id=a;newE.style.position="relative";newE.style.border="1px solid black";newE.style.height=h*2+'px';newE.style.width=w*2+'px';newE.innerHTML=c;newE.style.fontSize=f*2+'px';newE.style.lineHeight=h*2+'px';newE.style.background="#ccc";newE.style.top= -h+"px";e.appendChild(newE);}else{x.style.display="block";}
}
function remove(e){var a='enlarge'+e.id;var x=document.getElementById(a);if(x)x.style.display='none';
}
</script>
</body></html>

【前端】三种方法将文字垂直居中相关推荐

css3 渐变色 3种,css3实现渐变色文字的三种方法
css3样式代码实现渐变色文字的三种方法,有一定的参考价值,有需要的朋友可以参考或记录一下,希望对你有所帮助. 在开发过程中,UI设计师经常会设计一些带渐变文字的设计图,给到我们前端程序员,放在以前程 ...
多行文本垂直居中的三种方法
本篇是我整理的多行文本垂直居中的三种方法效果图如下图方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格,子元素设置vertical-alig ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
前端实现轮播图的三种方法。
轮播图,作为前端学习的经典案例,涉及了各种知识点,包括动画函数,js基础知识以及逻辑思路等,一辈子只做一次. 下面总结实现轮播图的三种方法,从易到难,大家选择性学习. 轮播图一. Vue.js实现轮 ...
PDF如何翻译成中文？三种方法教你怎样翻译PDF上的文字
小伙伴们在学习或工作中遇到外国文章时是不是会先翻译成中文再阅读呢?如果文章是word或者txt格式,我们可以直接复制文字进行翻译.但是有些文章为了看起来美观可能会生成PDF格式,我们想翻译的话,就需要 ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
文字分割线的三种方法
为什么80%的码农都做不了架构师?>>> 有很多网站都有这么一种实现:就一条分割线的中间有文字的显示,以下则列出三种实现方法. 第一种实现方法的思路是设置 border 和 l ...
三种方法使图片变成灰色（前端技术）
1.CSS Filter 使用CSS过滤器属性可能是最简单的方法把图像变成灰度.以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度. 现在,过滤器属性是CSS3规范的一部分,并支持在 ...
WordPress文章防复制的三种方法
原文地址 WordPress文章如何防复制三种方法 - 方包博客 - java|python|前端开发|运维|电商|ui设计有的时候我们非常烦恼,我们好不容易辛辛苦苦写的一篇文章,自己的站还没收录呢 ...
latex自动生成中文目录_自动生成工作表目录三种方法，看哪种适合你？
如果在一个工作簿内有很多工作表需要去维护管理,一个个的查找显然是很麻烦的,建立一个工作表的导航目录无疑是最便捷的方法. 下面介绍三种生成工作表目录的方法: 一.利用宏表函数生成可导航目录第1步:定义 ...

【前端】三种方法将文字垂直居中

【前端】三种方法将文字垂直居中相关推荐

最新文章

热门文章