div文字如何实现垂直居中 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关div文字如何实现垂直居中的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

<强> 1,vertical-align属性让文字居中

vertical-align值有很多,常用的就是中间,底部,text-bottom等,然而真实使用的时候,我们会发现这个属性”时灵时不灵”,有些情况下我们加了这个属性之后仍然不见img或者文本有任何的变化。那是因为vertical-align只作用在inline-block或者内联,还有表格单元等元素内。

示例:

& lt; div风格=皏ertical-align:中间,显示:表格单元;“比; 　　https://www.yisu.com/zixun/& lt; img src=" 02. jpg”alt=" "> 　　

文本居中

<强> 2,利用行高(行高)让文字垂直居中

如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可。

示例:

p{高度:30 px;行高:30 px;宽度:100 px;溢出:隐藏;}

<强> 3,利用内边距(填充)让文字垂直居中

使用内边距让文字垂直居中和利用行高让文字垂直居中差不多,同样适合一行或几行文字垂直居中。

示例:

p{填充:20 px 0;}

<强> 4,利用CSS3的变换来实现文字垂直居中

示例:

.center-vertical { 　　位置:相对; 　　上图:50%; 　　变换:translateY (-50%); 　　}.center-horizontal { 　　位置:相对; 　　左:50%; 　　变换:translateX (-50%); 　　}

<强> 5,利用flex布局实现文字垂直居中

示例:

。flex {/* flex布局*/显示:flex;/*实现垂直居中*/对齐项目:中心;/*实现水平居中*/justify-content:中心; 　　　　text-align:证明; 　　宽度:200 px; 　　身高:200 px; 　　背景:# 000; 　　保证金:0汽车; 　　颜色:# fff; 　　}

感谢各位的阅读!关于div文字如何实现垂直居中就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!