欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

单行文字垂直居中，多行文字垂直居中

程序员文章站 2024-03-14 10:18:22
...

这里通过下面一个实例来讲一下单行文字居中和多行文字居中的方法：

一、单行文字居中

原理：
       使用height 和 line-height，相等的原理。

二、多行文字居中

原理：
       将多行文字当做一张图片去处理，使其居中。

代码：

    <html>
        <head>
        <title>Mr企鹅先森</title>   
        <style type="text/css">
           html{
              font-size: 14px;  
           }
          .only{
              border: 1px solid red;
              padding: 10px 10px;
              height: 30px;
              line-height: 30px;
          }
          .box_2{
            display: table-cell;
            width: 550px;
            height: 1.14rem;
            padding: 2rem 2rem;
            border: 4px solid #beceeb;
            color: #069;
            font-size: 10rem;
            vertical-align: middle;
           }
          .word{
            display:inline-block; 
            font-size:0.1rem; 
           }
        </style>
        </head>
        <body>
            <div class="only">111111111</div>
            <div class="box_2">
                <span class="word">
                    这里显示多行文字。vrbrtbtrnyynnnnnnnnnnnnnnnnnnnnnnnnnnnn
                    nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnbntrsssssssssssssssss
                    gerrfewe23e23r3433g43g343fr2323r23nnnnnnnnnnnnnnnnnnry
                     ooooooooooooooooooooooooooooooooooooooooooooooooooooo</span>
            </div>
        </body>      
    </html>

效果

单行文字垂直居中，多行文字垂直居中

上一篇： 慢查询定位与调优学习笔记

下一篇： 分享OpenStack能成功的原因

推荐阅读