肥宅综合社区-做一个优雅文明的综合社区

搜索内容

CSS文本上下居中对齐的实现方法和示例代码

2023-10-03 281阅读 0评论

CSS文本上下居中对齐是指将文本在水平方向上居中,在垂直方向上居中,以使文本在屏幕上显示更加美观。实现文本上下居中对齐的方法有两种:
使用CSS的“line-height”属性:
这是一个段落
p{line-height:200px;text-align:center;}
使用CSS的“line-height”属性,可以将文本居中对齐,其中“line-height”属性用于设置行高,“text-align”用于设置文本的水平对齐方式。
使用CSS的“display”属性:
这是一个段落小标题
h3{display:inline-block;vertical-align:middle;text-align:center;}
使用CSS的“display”属性,可以将文本居中对齐,其中“display”属性用于设置元素的显示方式,“vertical-align”用于设置元素的垂直对齐方式,“text-align”用于设置文本的水平对齐方式。
以上就是CSS文本上下居中对齐的实现方法,下面是一个示例代码:

    p {
        line-height: 200px;
        text-align: center;
    }

    h3 {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
    }

以上代码可以实现文本上下居中对齐的效果,只需将代码复制到CSS文件中即可。

文章版权声明:本站部分内容系网络转载,如果文章触发到您的利益或版权,请联系本站客服邮箱kefu@fz331.com删除,我们将48小时之内删除。

发表评论

上传附件:
评论列表 (有 0 条评论,281人围观)
切换注册

登录

忘记密码?

切换登录

注册

验证码