css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...

在网页设计的过程中，有时候可能为了布局美观可能需要让文本居中，那么，怎么设置文本居中呢？本篇文章将给大家介绍关于css设置文本垂直居中的方法。

首先我们要知道通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center，对div等块级元素，只需要设置其left和right的margin值为auto；要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效。所以接下来我们就来看看css实现单文本垂直居中和多文本垂直居中的实现方法。

我们先来看看css单行文本垂直居中

对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设置一致就可以了。

css单行文本垂直居中的实现代码：

HTML：

php中文网单行文本垂直居中

CSS：#div1{ width: 300px; height: 100px; margin: 50px auto; border: 1px solid red; line-height: 100px; /*设置line-height与父级元素的height相等*/ text-align: center; /*设置文本水平居中*/ overflow: hidden; /*防止内容超出容器或者产生自动换行*/ }

css单行文本垂直居中效果如下：

然后再来看看多行文本垂直居中

说明：多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

1、父级元素高度不固定

父级高度不固定的时，高度只能通过内部文本来撑开。所以，我们可以通过设置内填充(padding)的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

css多行文本垂直居中代码：

HTML：

php中文网多行文本垂直居中， php中文网多行文本垂直居中， php中文网多行文本垂直居中， php中文网多行文本垂直居中。

CSS：#div1{ width: 300px; margin: 50px auto; border: 1px solid red; text-align: center; /*设置文本水平居中*/ padding: 50px 20px; }

css多行文本垂直居中效果如下：

2、父级元素高度固定

css中的vertical-align属性，它只对拥有valign特性的元素才生效，结合display: table;，可以使得div模拟table属性。因此我们可以设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle。

css多行文本垂直居中代码：

HTML：

php中文网固定高度多行文本垂直居中， php中文网固定高度多行文本垂直居中， php中文网固定高度多行文本垂直居中， php中文网固定高度多行文本垂直居中。

CSS：#outer{ width: 400px; height: 200px; margin: 50px auto; border: 1px solid red; display: table; } #middle{ display:table-cell; vertical-align:middle; text-align: center; /*设置文本水平居中*/ width:100%; }

css多行文本垂直居中效果如下：

本篇文章到这里就结束了，其实还有其他方法就不一一介绍了，更多精彩可以关注php中文网。

css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...相关推荐

【自然语言处理】【文本生成】Transformers中使用约束Beam Search指导文本生成
Transformers中使用约束Beam Search指导文本生成原文地址:https://huggingface.co/blog/constrained-beam-search 相关博客 [自然 ...
php中文字怎么上下居中,CSS怎么设置垂直居中？
在我们开发前端页面的时候,为了让页面效果美观,会出现需要垂直居中效果的地方.本章就让我们来了解一下用css如何设置垂直居中,详细介绍一下设置文字与div盒子的垂直居中的几种方法.有一定的参考价值,有需 ...
关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号单行文本溢出显示省略号方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
bat 两个文本字符替换_Excel中最全最实用的文本函数公式大全
一.字符长度与字节长度 1.获取A1单元格字符长度 =LEN(A1) 2.获取A1单元格字节长度 =LENB(A1) 3.将A1单元格全角(双字节)字符转换成半角(单字节)字符 =ASC(A1) 4. ...
设置div的高度_html中如何让div居中
html中使得div居中的方法有:margin方法通过设置margin的左边距和上边距的值为父元素减去子元素再除以2的值来使div居中:另外position方法也可以使div居中 web前端学习:打造 ...
jsp文字上下居中显示_jsp中怎样让文字居中 ?
慕森王只要设置变量valign="middle"就可以了但要注意这些只在table里有用还有就是用CSS举例:height: 4em;line-height: 4em;overf ...
html中表格实现在页面居中显示,html中怎么把表格居中
html中把表格居中的方法:首先创建一个HTML示例文件:然后使用table标签创建一个两行两列的表格:接着给table标签添加一个class属性:最后将margin属性设置为"0 auto ...
合成文本图像_设计中哪个更重要：图像还是文本？
合成文本图像 Technology has changed the modern world greatly in recent years and, in particular, it has ch ...
python中用于绘制各种图形、标注文本_在python中的图形上绘制常量文本-问答-阿里云开发者社区-阿里云...
我确定我可能在问一个愚蠢的问题,但找不到与我相同的问题. 我的朋友帮我写了一段代码,分析给出的数据并用趋势线将其绘制出来,我想在图的右上方添加一行文本,并在图上打印出其他内容,以表明它是什么文件(在代 ...
a标签里面设置onclick_实现a标签中的各种点击（onclick）事件的方法
我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...

css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...

css如何设置文本垂直居中显示,css中怎么设置文本居中？css文本垂直居中的设置方法...相关推荐

最新文章

热门文章