css 实现 html 元素内文字水平垂直居中的N种方法

        上一篇博文写了div 中元素居中的N种常用方法,那么单个html元素:div(块级元素代表),span(行内元素代表)中的文字如何水平垂直都居中呢?实现方法如下:

        本文例子使用的 html body结构下的模型如下:

<body><div class="container">文字居中显示</div>
</body>

        例子居中效果都如下图:

注:当把div 换成其他块级元素,如<p>或<h1>~<h6>时,以下方法仍然奏效。但当把div换成行内元素,如<span>时,第4种方法将失效。 

       1、弹性布局 设置容器项目在横轴和纵轴上都居中对齐

<style>.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: flex;justify-content: center;align-items: center;}
</style>

        

        2、使用 table-cell 显示        

                使用 table-cell 可以实现 div 中文字的垂直居中,然后在使用text-align: center可实现水平居中

<style>.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: table-cell;vertical-align: middle;text-align: center;}	
</style>

         3、使用 Grid 布局

                display: grid + place-items: center

<style>.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: grid;place-items: center;}	
</style>

          4、使用 line-height

                设置line-height的值和为div的height值,实现垂直居中,使用text-align实现水平居中。该方法只能使用于单行文本,如文本超过单行,文字将会溢出。且该方法不适用于span等行内元素

<style>.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;text-align: center;line-height: 200px;}	
</style>

                当多行文字时,如下:

<body><div class="container">文字居中显示文字居中显示文字居中显示</div>
</body>

        当用该方法用于span等行内元素时:为span设置的宽高将失效,因为默认情况下,行内元素无法设置宽度和高度,其宽度和高度都是由它们所包含的内容决定的。有关html块级元素、行内元素、行内块级元素的说明请看该篇博文:HTML 块级元素、行内元素和行内块级元素

<body><span class="container">文字居中显示</span>
</body>

        要想让span等行内元素也实现div的效果,使用display:block 或 display:inline-block 即可

<style>.container{height: 200px;width: 200px;border: 1px solid black;background-color: aliceblue;display: block;            /* 把span显示变成块级元素 */text-align: center;line-height: 200px;}	
</style>

        5、使用 text-align: center + padding   

               使用 text-align: center 可使文字水平居中,当没有固定高度时,使用 padding-top 和 padding-bottom 相同高度即可实现垂直居中。当要求固定高度时,先看文字的高度,然后再计算出  padding-top 和 padding-bottom 相同的高度也能实现垂直居中

<style>/* 不限定高度时,container 不设置 height 属性值使用 text-align: center + padding-top、padding-bottom 相同高度*/.container{width: 200px;border: 1px solid black;background-color: aliceblue;text-align: center;padding-top:50px;padding-bottom:50px;}
</style>

<style>/*  限定高度时(如div总高度限定 200px),container 不设置 height 属性值使用 text-align: center + padding-top、padding-bottom 要根据div高度减去文字高度再平分剩余的高度假如文字高度占20px,那么padding-top、padding-bottom 都是90px*/.container{width: 200px;border: 1px solid black;background-color: aliceblue;text-align: center;padding-top:90px;padding-bottom:90px;}
</style>

  •  组合上篇 div找那个元素居中和本篇html元素居中的方法综合实现子div在父div中居中显示并且子div中的文字居中

<head><meta charset="utf-8" /><title></title><style>.container{height: 300px;width: 300px;border: 1px solid black;background-color: aliceblue;display: flex;justify-content: center;align-items: center;}.box{width: 150px;height: 150px;background: #55a9ff;display: flex;justify-content: center;align-items: center;}</style></head>
<body><div class="container"><div class="box">文字居中显示</div></div>
</body>

        注:box 中可使用上述第1,第3,第4,第5种方法实现组合文字居中,第2种display: table-cell讲失效 

以上方法如有错误请各位不吝指教,如以后有别的方法将会往下继续添加,各位有其他方法可留言告知。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/35332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebAPIs 第二天

DOM事件基础 事件监听事件类型事件对象 一.事件监听 ① 概念&#xff1a;就是让程序检测是否有事件发生&#xff0c;一旦有事件触发&#xff0c;就立即调用一个函数做出响应&#xff0c;也成为绑定事件或者注册事件 ② 语法&#xff1a;元素对象.addEventListener(事件类型&…

机器学习---对数几率回归

1. 逻辑回归 逻辑回归&#xff08;Logistic Regression&#xff09;的模型是一个非线性模型&#xff0c; sigmoid函数&#xff0c;又称逻辑回归函数。但是它本质上又是一个线性回归模型&#xff0c;因为除去sigmoid映射函 数关系&#xff0c;其他的步骤&#xff0c;算法都是…

从零开始,贪吃蛇小游戏系列专栏完美收官!

&#x1f3ae; 从零开始&#xff0c;贪吃蛇小游戏系列专栏完美收官&#xff01; &#x1f40d; 各位游戏开发探索者们&#xff0c;大家好&#xff01;我是[亿元程序员]&#xff0c;一位拥有8年游戏开发经验的主程。经过一段时间的努力&#xff0c;我很高兴地宣布&#xff0c;我…

阿里云预装LAMP应用导致MySQL不显示访问密码如何解决

&#x1f600;前言 本篇博文是关于阿里云云服务器ECS部署MySQL过程中出现的一下坑&#xff0c;希望能够帮助到您&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家…

SUB-1G SOC芯片DP4306F 32 位 ARM Cortex-M0+内核替代CMT2380F32

DP4306F是一款高性能低功耗的单片集成收发机&#xff0c;集成MO核MCU&#xff0c;工作频率可覆盖200MHiz^ 1000MHz。 支持230/408/433/470/868/915频段。该芯片集成了射频接收器、射频发射器、频率综合器、GFSK调制器、GFSK解调器等功能模块。通过SPI接口可以对输出功率、频道选…

gitlab-Runner搭建

root wget https://packages.gitlab.com/runner/gitlab-runner/packages/fedora/29/gitlab-runner-12.6.0-1.x86_64.rpm/download.rpm rpm -ivh download.rpm ---- 安装 rpm -Uvh download.rpm -----更新升级 然后运行&#xff1a; gitlab-runner register --url https://git…

RabbitMQ相关面试题

用到了哪些MQ?什么使用场景?MQ的组成部分?MQ宕机了怎么办?如何进行持久化的? MQ的选型? Kafka:高吞吐量、低延迟的分布式消息队列,主要用于大规模数据处理和流式处理 RocketMQ:RocketMQ是阿里巴巴开源的分布式消息队列,具有高吞吐量、低延迟、高可靠性等特点 RabbitM…

【Go 基础篇】Go语言浮点类型:探索浮点数的特点与应用

介绍 浮点数是计算机编程中用于表示实数的一种数据类型&#xff0c;用于处理具有小数部分的数值。Go语言&#xff08;Golang&#xff09;提供了两种主要的浮点数类型&#xff1a;float32和float64&#xff0c;分别用于单精度和双精度浮点数的表示。本篇博客将深入探讨Go语言中…

38 | 浦发银行股票分析案例

本文将通过一个浦发银行股票分析案例,探讨如何从多个维度对股票进行分析,包括基本面、技术面和市场环境等因素。我们将深入挖掘浦发银行的财务数据、业务模式以及市场定位,以了解其内在价值和潜在风险。同时,我们还将考察技术面的指标,如价格走势、均线形态等,以揭示市场…

linux 命令--常用关机命令

1.使用shutdown命令 shutdown命令是Linux系统下最常用的关机命令之一。它可以让系统在指定时间内进行关机或者重启操作。例如&#xff0c;下面的命令可以让系统在5分钟后进行关机操作&#xff1a; sudo shutdown -h5其中&#xff0c;“-h”表示关机&#xff0c;“5”表示5分钟…

ThinkPHP8命名规范-ThinkPHP8知识详解

本文主要讲解thinkphp8的命名规范&#xff0c;主要包括&#xff1a;遵循PHP自身的PSR-2命名规范和PSR-4自动加载规范、目录和文件命名规范、函数和类、属性命名规范、常量和配置命名规范、数据表和字段命名规范、不能使用PHP保留字。 在使用thinkphp8开发项目之前&#xff0c;…

C#使用OpenCv(OpenCVSharp)图像全局二值化处理实例

本文实例演示C#语言中如何使用OpenCv(OpenCVSharp)对图像进行全局二值化处理。 目录 图像二值化原理 函数原型 参数说明 实例 效果 图像二值化原理

线程转换状态,傻傻分不清等待和阻塞吗?你还在暴力的停止线程吗?

线程切换 线程创建之后&#xff0c;调用start()方法开始运行。当线程执行wait()方法之后&#xff0c;线程进入等待状态。进入等待状态的线程需要依靠其他线程的通知才能够返回到运行状态&#xff0c;而超时等待状态相当于在等待状态的基础上增加了超时限制&#xff0c;也就是超…

腾讯云服务器竞价实例是什么?适用于什么行业?有啥优惠?

腾讯云服务器CVM计费模式分为包年包月、按量计费和竞价实例&#xff0c;什么是竞价实例&#xff1f;竞价实例和按量付费相类似&#xff0c;优势是价格更划算&#xff0c;缺点是云服务器实例有被自动释放风险&#xff0c;腾讯云服务器网来详细说下什么是竞价实例&#xff1f;以及…

GUI、多线程编程、网络编程简介

GUI、多线程编程、网络编程简介 文章目录 GUI简介什么是GUIGUI有什么用使用方法 多线程编程什么是多线程编程多线程编程有什么用提高程序的响应能力提高程序的性能实现异步编程并发数据访问和共享资源实现复杂的算法和任务分解 进行多线程编程的步骤 网络编程什么是网络编程网络…

JMeter处理接口签名之BeanShell实现MD5加密

项目A需要给项目B提供一个接口&#xff0c;这个接口加密了&#xff0c;现在需要测试这个接口&#xff0c;需要怎么编写脚本呢&#xff1f;实现接口签名的方式有两种&#xff1a;BeanShell实现MD5加密和函数助手实现MD5加密&#xff0c;之前已经分享过了函数助手实现MD5加密&…

React如何配置env环境变量

React版本&#xff1a; "react": "^18.2.0" 1、在package.json平级目录下创建.env文件 2、在‘.env’文件里配置环境变量 【1】PUBLIC_URL 描述&#xff1a;编译时文件的base-href 官方描述&#xff1a; // We use PUBLIC_URL environment variable …

从KM到Cure Models:常用生存分析方法的优缺点

一、引言 生存分析是一种用于研究个体生命长度或事件发生时间的统计方法。在许多领域中&#xff0c;如医学、社会学、经济学和工程学等&#xff0c;生存分析被广泛应用于分析个体的生存时间&#xff0c;并研究相关因素对生存时间的影响。通过生存分析&#xff0c;我们可以评估特…

交换排序——选择排序和冒泡排序的区别是什么?

今天重温一下算法&#xff0c;其实刚开始我觉得冒泡排序和选择排序是一样的&#xff0c;因为他们排序过程中都是通过相邻的数据比较找到最小/最大的数据&#xff0c;通过不断思考和学习才明白&#xff0c;两者还是有区别的。 冒泡排序 概念 冒泡排序(Bubble Sort)&#xff0…

SpringBoot使用thymeleaf模版引擎配置自定义错误页面

1、要在Spring Boot项目中配置自定义的错误页面&#xff0c;你可以遵循以下步骤&#xff1a; 1.1、pom.xml引入thymeleaf <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId><…