• 技术文章 >Web开发 >css教程

    css设置文字居中的两种方法

    小妮浅浅小妮浅浅2021-07-09 10:18:12原创23980

    1、利用text-align属性使文本水平居中。

    text-align属性规定了文本在元素中的水平对齐,通过使用center值来设置文本。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .txt1{
    font-size: 30px;
    text-align: center;
    }
    span{
    text-align: center;
    }
    .txt2{
    text-align: right;
    }
    </style>
    </head>
    <body>
    <p>这是内容1</p>
    <p><span>这是内容2</span></p>
    <p><span>这是内容3</span></p>
    <!--上面用span居中时,无法居中,因此span是行级元素,
    行级元素无法设置text-align,若把text-align设置给外面的p即可,
    所以自己理解的,若想把行级元素居中,在外面给它套个块级元素。
    -->
    </body>
    </html>

    2、line-height属性使文字垂直居中

    把 line-height 的高度设置和 height 高度一样就能使文字垂直居中。

       html,body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .content {
                width: 300px;
                height: 300px;
                background: orange;
                margin: 0 auto; /*水平居中*/
                position: relative;
                top: 50%; /*偏移*/
                margin-top: -150px;
            }

    以上就是css设置文字居中的两种方法,希望对大家有所帮助。更多编程基础知识学习:python学习网

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css
    上一篇:css旋转属性如何理解 下一篇:css中删除input输入框的阴影

    相关文章推荐

    • jQuery中css(properties)如何使用?• css旋转属性如何理解

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网