css 文字垂直居中

css样式中提供了text-align=center 实现的是水平居中，但没有提供直接的垂直居中，具体原因不得而知，实现方式可以通过设置行高=盒子的高度，原因很好理解，行高= 上缝隙+文字高度+下缝隙，而文字的高度又是固定的，上下缝隙距离是均分的，所有就会强制文字垂直居中显示了，只不过上下缝隙是没有颜色的看不见而已，
举例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {width: 200px;color: white;font: normal 400 14px 'Mircosoft Yahei';background-color: rgb(95, 94, 91);text-decoration: none;height: 50px;display: block;line-height: 50px;text-indent: 2em;}a:hover {background-color: rgb(245, 141, 45);}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记 本平板</a><a href="#">出行 穿戴</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a>
</body></html>

css 文字垂直居中相关推荐

CSS 文字垂直居中自适应 - 代码篇
CSS 文字垂直居中自适应 - 代码篇引言 <div>内的文字能在图片缩放的同时,自动居中(自适应居中),详情看下列代码. 效果图: 解决办法 · 代码示下: /*CSS代码*/ .h3 ...
实现css文字垂直居中的8种方法
CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到 https://www.jb51.net/article/17825 ...
java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: cs ...
文字竖直居中 html,CSS 文字垂直居中
1.高度为百分比,line-height 不知道设置具体的数值的情况,利用伪元素进行居中 HTML 这是要居中的文字 CSS 给要居中元素设置一个伪元素 .son{ height: 50%; back ...
div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
css之line-height及图片文字垂直居中
css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...
html字居右垂直设置,css文字水平垂直居中怎么设置？
css文字水平垂直居中怎么设置?下面本篇文章就来给大家介绍使用CSS设置文字水平居中和垂直居中的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.文字水平居中在CSS中想要 ...
利用vertical-align实现图片文字垂直居中对齐（HTML、CSS）
利用vertical-align实现图片文字垂直居中对齐(HTML.CSS) <!DOCTYPE html> <html lang="en"><hea ...
文字垂直居中（HTML、CSS）
文字垂直居中(HTML.CSS) 要使文字居中即将文字行高等于盒子高度即可实现 <!DOCTYPE html> <html lang="en"><h ...

css 文字垂直居中

css 文字垂直居中相关推荐

最新文章

热门文章