当前位置: 首页 > 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博客...

「React + Resium 从零搭建三维地球,比你想象中简单」

官网地址&#xff1a;点我 一、效果预览 二、项目初始化 2.1 创建 React 项目 # 使用 Vite 创建 React TypeScript 项目 pnpm create vite react-cesium-starter --template react-ts cd react-cesium-starter# 或者使用 CRA&#xff08;不推荐&#xff0c;较慢&#xff09;…...

GPU 租用:智星云抢占式实例的极致省钱攻略

按小时计费怎么省&#xff1f;GPU 租用竞价策略与抢占式实例实操——以智星云为例&#xff0c;解锁高性价比算力开篇&#xff1a;算力焦虑的最佳解药大模型时代的科研与开发&#xff0c;往往是一场“算力”的比拼。对于个人开发者、学生群体乃至初创团队来说&#xff0c;动辄数…...

软件复用中的组件化开发实践方法

软件复用中的组件化开发实践方法 在快速迭代的软件开发领域&#xff0c;如何高效地复用代码、降低开发成本并提升系统可维护性&#xff0c;一直是开发者关注的焦点。组件化开发作为一种成熟的软件复用实践方法&#xff0c;通过将系统拆分为独立、可复用的功能单元&#xff0c;…...

突破性开源项目:重新定义在线幻灯片编辑体验的完整方案

突破性开源项目&#xff1a;重新定义在线幻灯片编辑体验的完整方案 【免费下载链接】PPTist PowerPoint-ist&#xff08;/pauəpɔintist/&#xff09;, An online presentation application that replicates most of the commonly used features of MS PowerPoint, allowing f…...

IEEE1588v2深度解析:PTP路径时延测量的两种机制对比与应用场景

1. IEEE1588v2与PTP协议基础扫盲 第一次接触IEEE1588v2协议时&#xff0c;我被满屏的"主时钟"、"从时钟"、"透明时钟"这些术语绕得头晕。后来在工业自动化项目里实际调试设备同步时才发现&#xff0c;这套协议就像个隐形的指挥家&#xff0c;让…...

微调后幻觉率下降57%却仍被拒审?2026奇点大会首次公开「合规性微调双校验协议」(仅限首批注册开发者获取)

第一章&#xff1a;2026奇点智能技术大会&#xff1a;大模型微调最佳实践 2026奇点智能技术大会(https://ml-summit.org) 数据准备与质量校验 高质量微调始于可信赖的数据。推荐采用三阶段清洗流程&#xff1a;去重、语义过滤和人工抽检。使用 Hugging Face Datasets 库加载数…...

实测Claude Opus 4.6:100万上下文,1人顶3人,这才是裁员潮的保命神器

作为深耕CSDN的技术博主&#xff0c;每天都能收到开发者的私信&#xff1a;“怕被裁&#xff0c;到底该怎么用AI提效&#xff1f;”“免费AI不好用&#xff0c;高级会员开通太麻烦”“Claude又更新了&#xff0c;跟不上节奏怎么办&#xff1f;”其实答案很简单&#xff1a;2026…...

为什么awesome-ml是数据科学家的必备工具库?

为什么awesome-ml是数据科学家的必备工具库&#xff1f; 【免费下载链接】awesome-ml Curated list of useful LLM / Analytics / Datascience resources 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-ml awesome-ml是一个精心策划的LLM/分析/数据科学资源列表…...

5分钟掌握英雄联盟LCU智能助手:数据驱动游戏水平提升的完整指南

5分钟掌握英雄联盟LCU智能助手&#xff1a;数据驱动游戏水平提升的完整指南 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否在英雄联盟中…...

3步掌握Happy Island Designer:从零开始打造完美动物森友会岛屿

3步掌握Happy Island Designer&#xff1a;从零开始打造完美动物森友会岛屿 【免费下载链接】HappyIslandDesigner "Happy Island Designer (Alpha)"&#xff0c;是一个在线工具&#xff0c;它允许用户设计和定制自己的岛屿。这个工具是受游戏《动物森友会》(Animal …...