如何实现div文字垂直居中

发布时间:2022-03-04 15:22:05 作者:iii
来源:亿速云 阅读:206

本文小编为大家详细介绍“如何实现div文字垂直居中”,内容详细,步骤清晰,细节处理妥当,希望这篇“如何实现div文字垂直居中”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

    1、vertical-align属性让文字居中

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

    示例:

    <divstyle="vertical-align:middle;display:table-cell;">

    <imgsrc="02.jpg"alt="">

    <p>文本居中</p></div>

    2、利用行高(line-height)让文字垂直居中

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

    示例:

    p{height:30px;line-height:30px;width:100px;overflow:hidden;}

    3、利用内边距(padding)让文字垂直居中

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

    示例:

    p{padding:20px0;}

    4、利用CSS3的transform来实现文字垂直居中

    示例:

    .center-vertical{

    position:relative;

    top:50%;

    transform:translateY(-50%);

    }.center-horizontal{

    position:relative;

    left:50%;

    transform:translateX(-50%);

    }

    5、利用flex布局实现文字垂直居中

    示例:

    .flex{/*flex布局*/

    display:flex;/*实现垂直居中*/

    align-items:center;/*实现水平居中*/

    justify-content:center;

    text-align:justify;

    width:200px;

    height:200px;

    background:#000;

    margin:0auto;

    color:#fff;

    }

如何实现div文字垂直居中

读到这里,这篇“如何实现div文字垂直居中”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. div文字如何实现垂直居中
  2. DIV或者DIV的图片如何实现水平与垂直居中

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

div

上一篇:css与div的区别是什么

下一篇:css中p段落行高行距如何设置

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》