首页 / CSS / css设置文字上下居中，一行文字居中，两行或多行文字同样居中,附带效果图

css设置文字上下居中，一行文字居中，两行或多行文字同样居中,附带效果图

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css设置文字上下居中，一行文字居中，两行或多行文字同样居中,附带效果图，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含744字，纯文字阅读大概需要2分钟。

内容图文

附图:

技术分享图片

1. 利用Flex布局实现

demo.html

            1 <div class="demo demo-flex"><span>孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。</span></div>

style.css

             1
            .demo {

             2
                    width: 120px;

             3
                    height: 200px;

             4
                    border: 1px solid red;

             5
            /*
            line-height: 25px;
            */
             6         font-size: 12px;
 7      }
 8       .demo-flex{
 9        display: flex;
10         align-items: center;
11         justify-content: center;
12         flex-direction: column;
13       }

2. 利用属性 line-height

<div id="box">
　　<span>文本上下居中</span>
</div>

style.css

            1
            #box {

            2
                  width: 200px;

            3
                  height: 120px;

            4
                  border: 1px solid red;

            5       text-align: center;
6 }
7#box span {
8       line-height: 120px;
9 }

注意:　这个方法只适用于 单行文本

3. 利用position 定位来实现

 

4. 利用 vertical-align 来实现

原文：https://www.cnblogs.com/gaoht/p/9132612.html

内容总结

以上是互联网集市为您收集整理的css设置文字上下居中，一行文字居中，两行或多行文字同样居中,附带效果图全部内容，希望文章能够帮你解决css设置文字上下居中，一行文字居中，两行或多行文字同样居中,附带效果图所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1230241.html

来源：【匿名】