css如何使文字垂直对齐

藏色散人
Freigeben: 2020-12-18 10:17:19
Original
5270 Leute haben es durchsucht

css使文字垂直对齐的方法:1、设置行文字的实际高度height和所在行的高度line-height相等;2、通过设置上下的padding值相同使多行未知高度文字垂直居中;3、使用vertical-align使多行文本固定高度的居中即可。

css如何使文字垂直对齐

本教程操作环境:Windows7系统、HTML5&&CSS3版本,该方法适用于所有品牌电脑。

推荐:《css视频教程

一、单行文字垂直居中对齐

如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。

示例:

     单行文字实现垂直居中   
现在我们要使这段文字垂直居中显示!
Nach dem Login kopieren

效果图:

6f9250316129dc212c56ab5c6baf171.png

不过在Internet Explorer 6及以下版本中,这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把

完全填充的一种方式而已。可以使用类似下面的代码:

div { padding:25px; }
Nach dem Login kopieren

示例:

    多行文字实现垂直居中   
现在我们要使这段文字垂直居中显示! div { padding:25px; border:1px solid #FF0099; }
Nach dem Login kopieren

效果图:

980c45ab30b50321e67a4781ffdcad8.png

三、多行文本固定高度的居中

CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟

模拟
,所以我们可以使用这个属性来让

注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!
就可以使用vertical-align了。
元素:

div#wrap { height:400px; display:table; } div#content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; width:760px; }
Nach dem Login kopieren

示例:

    多行文字实现垂直居中   
现在我们要使这段文字垂直居中显示!现在我们要使这段文字垂直居中显示!现在我们要使这段文字垂直居中显示!现在我们要使这段文字垂直居中显示!
Nach dem Login kopieren

效果图:

57488482d6e1f82d78cb22d69e0b87a.png

Das obige ist der detaillierte Inhalt voncss如何使文字垂直对齐. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!