当前位置: 首页 > news >正文

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讲失效 

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

相关文章:

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

上一篇博文写了div 中元素居中的N种常用方法&#xff0c;那么单个html元素&#xff1a;div&#xff08;块级元素代表&#xff09;&#xff0c;span&#xff08;行内元素代表&#xff09;中的文字如何水平垂直都居中呢&#xff1f;实现方法如下&#xff1a; 本文例子使用的 html…...

数据结构-队列的实现(C语言版)

前言 队列是一种特殊的线性表&#xff0c;它只允许在一端对数据进行插入操作&#xff0c;在另一端对数据进行删除操作的特殊线性表&#xff0c;队列具有先进先出的&#xff08;FIFO&#xff09;的 特性&#xff0c;进行插入操作的一端称为队尾&#xff0c;进行删除操作的一端称…...

Vue.js 生命周期详解

Vue.js 是一款流行的 JavaScript 框架&#xff0c;它采用了组件化的开发方式&#xff0c;使得前端开发更加简单和高效。在 Vue.js 的开发过程中&#xff0c;了解和理解 Vue 的生命周期非常重要。本文将详细介绍 Vue 生命周期的四个阶段&#xff1a;创建、挂载、更新和销毁。 …...

矩阵定理复习记录

矩阵复习 矩阵导数定理 若A是一个如下矩阵&#xff1a; A [ a 11 a 12 a 21 a 22 ] A \begin{bmatrix}a_{11}&a_{12}\\a_{21}&a_{22}\end{bmatrix} A[a11​a21​​a12​a22​​] y是一个向量矩阵&#xff1a; y ⃗ [ y 1 y 2 ] \vec{y}\begin{bmatrix}y_1\\y_2\e…...

Jenkins+Docker+SpringCloud微服务持续集成项目优化和微服务集群

JenkinsDockerSpringCloud微服务持续集成项目优化和微服务集群 JenkinsDockerSpringCloud部署方案优化JenkinsDockerSpringCloud集群部署流程说明修改所有微服务配置 设计Jenkins集群项目的构建参数编写多选项遍历脚本多项目提交进行代码审查多个项目打包及构建上传镜像把Eurek…...

认识 spring 中的事务 与 事务的传播机制

前言 本篇介绍spring中事务的实现方式&#xff0c;如何实现声明式事务&#xff0c;对事物进行参数的设置&#xff0c;了解事务的隔离级别和事务的传播机制&#xff1b;如有错误&#xff0c;请在评论区指正&#xff0c;让我们一起交流&#xff0c;共同进步&#xff01; 文章目录…...

PHP中的16个危险函数

php中内置了许许多多的函数&#xff0c;在它们的帮助下可以使我们更加快速的进行开发和维护&#xff0c;但是这个函数中依然有许多的函数伴有高风险的&#xff0c;比如说一下的16个函数不到万不得已不尽量不要使用&#xff0c;因为许多“高手”可以通过这些函数抓取你的漏洞。 …...

11、Nvidia显卡驱动、CUDA、cuDNN、Anaconda及Tensorflow Pytorch版本

Nvidia显卡驱动、CUDA、cuDNN、Anaconda及Tensorflow-GPU版本 一、确定版本关系二、安装过程1.安装显卡驱动2、安装CUDA3、安装cudnn4、安装TensorFlow5、安装pytorch 三、卸载 一、确定版本关系 TensorFlow Pytorch推出cuda和cudnn的版本&#xff0c;cuda版本推出驱动可选版本…...

将数据库文件压缩并上传到文件服务器

1.引入上传工具和压缩包工具 <dependency><groupId>org.springframework</groupId><artifactId>spring-test</artifactId> </dependency> <dependency><groupId>com.zlpay</groupId><artifactId>zl-util-fastdfs…...

docker — 容器网络

一、概述 Docker容器每次重启后容器ip是会发生变化的。 这也意味着如果容器间使用ip地址来进行通信的话&#xff0c;一旦有容器重启&#xff0c;重启的容器将不再能被访问到。 而Docker 网络就能够解决这个问题。 Docker 网络主要有以下两个作用&#xff1a; 容器间的互联…...

腾讯面试题:使用Redis分布式锁可能会出现哪些问题?

嗨大家好&#xff0c;我是你们的小米&#xff01;今天要和大家聊一个有趣的话题&#xff0c;那就是“腾讯面试题&#xff1a;使用Redis做分布式锁可能会出现哪些问题&#xff1f;”没错&#xff0c;就是腾讯大佬们在面试时经常会问到的一个问题&#xff0c;我们来一起深入了解一…...

直接在html中引入Vue.js的cdn来实现Vue3的组合式API

Vue3的组合式API是使用setup函数来编写组件逻辑的。setup函数是Vue3中用于替代Vue2的选项API&#xff08;如data、methods等&#xff09;的一种方式。在setup函数中&#xff0c;你可以访问到一些特殊的响应式对象&#xff0c;并且可以返回一些可以在模板中使用的数据、方法等。…...

YAPi在线接口文档简单案例(结合Vue前端Demo)

在前后端分离开发中&#xff0c;我们都是基于文档进行开发&#xff0c;那前端人员有时候无法马上拿到后端的数据&#xff0c;该怎么办&#xff1f;我们一般采用mock模拟伪造数据直接进行测试&#xff0c;本篇文章主要介绍YApi在线接口文档的简单使用&#xff0c;并结合Vue的小d…...

Java基础篇--Runtime类

介绍 Runtime类用于表示虚拟机运行时的状态&#xff0c;它用于封装JVM虚拟机进程。每次使用java命令启动虚拟机都对应一个Runtime实例&#xff0c;并且只有一个实例。 因此在Runtime类定义的时候&#xff0c;它的构造方法已经被私有化了(单例设计模式的应用)&#xff0c;对象…...

数字后端笔试题(1)DCG后congestion问题

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 已知某模块的DCG结果显示存在congestion&#xff0c;有congestion部分逻辑结构如下图: 问题1: 如何分析该电路有congestion问题的原因&#xff1f; 答&#xff1a;data selecti…...

数据结构:交换排序

冒泡排序 起泡排序&#xff0c;别名“冒泡排序”&#xff0c;该算法的核心思想是将无序表中的所有记录&#xff0c;通过两两比较关键字&#xff0c;得出升序序列或者降序序列。 算法步骤 比较相邻的元素。如果第一个元素大于第二个元素&#xff0c;就交换它们。对每一对相邻…...

SpringBoot复习:(42)WebServerCustomizer的customize方法是在哪里被调用的?

ServletWebServletAutoConfiguration类定义如下&#xff1a; 可以看到其中通过Import注解导入了其内部类BeanPostProcessorRegister。 BeanPostProcessor中定义的registerBeanDefinition方法会被Spring容器调用。 registerBeanDefinitions方法调用了RegistrySyntheticBeanIf…...

年至年的选择仿elementui的样式

组件&#xff1a;<!--* Author: liuyu liuyuxizhengtech.com* Date: 2023-02-01 16:57:27* LastEditors: wangping wangpingxizhengtech.com* LastEditTime: 2023-06-30 17:25:14* Description: 时间选择年 - 年 --> <template><div class"yearPicker"…...

分类过程中的一种遮挡现象

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由6张二值化的图片组成&#xff0c;让A&#xff0c;B中各有3个点&#xff0c;且不重合&#xff0c;统计迭代次数并排序。 其中有10组数据 差值结构 迭代次数 构造平均列A 构造平均列AB…...

下一代服务架构:单体架构-->分布式架构-->微服务(DDD)-->软件定义架构(SDF with GraphEngine)

参考&#xff1a;自己实现一个SQL解析引擎_曾经的学渣的博客-CSDN博客...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

ArcGIS Pro+ArcGIS给你的地图加上北回归线!

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...