纯css实现-让字符串在文字少时显示为居中对齐,而在文字多时显示为左对齐
纯css实现-让字符串在文字少时显示为居中对齐,而在文字多时显示为左对齐
使用flex实现
思路
-
容器样式(.container):- Flex容器的BFC性质使得其内部的子元素(.text-box)在水平方向上能够居中,通过
justify-content: center;实现。
- Flex容器的BFC性质使得其内部的子元素(.text-box)在水平方向上能够居中,通过
-
文本框样式(.text-box):BFC阻止了文本框从Flex容器中溢出,确保文本框的背景颜色不会延伸到Flex容器之外。
在文本少时,子元素宽度等于文本长度,但父容器让其居中,就表现出子元素中文本是居中的。
而文本多时,子元素宽度等于容器长度,虽然父容器也让子元素居中,子元素也在父容器中居中了。不过子元素中文本向左对齐,于是用户看到的就是子元素文本的向左对齐的表现形式。
源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.container {display: flex;justify-content: center;margin: 10px 10%;background-color: blue;}.text-box {background-color: red;}</style></head><body><div class="container"><div class="text-box">文字少-居中对齐,文字多-左对齐|</div></div><div class="container"><div class="text-box">文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|</div></div></body>
</html>

使用text-align实现
思路
-
容器样式(.container):
- 使用
text-align: center;将容器内的文本内容在水平方向上居中对齐。
- 使用
-
文本框样式(.text-box):
- 使用
display: inline-block;将文本框设置为内联块,使其在容器中水平居中。 - 设置文本框的文本对齐方式为左对齐,通过
text-align: left;实现。
- 使用
在文本少时,子元素宽度等于文本长度,但父容器让其居中,就表现出子元素中文本是居中的。
而文本多时,子元素宽度等于容器长度,虽然父容器也让子元素居中,子元素也在父容器中居中了。不过子元素中文本向左对齐,于是用户看到的就是子元素文本的向左对齐的表现形式。
源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.container {text-align: center;background: skyblue;margin: 10px 10%;}.text-box {display: inline-block;text-align: left;background: yellow;}</style></head><body><div class="container"><div class="text-box">文字少-居中对齐,文字多-左对齐|</div></div><div class="container"><div class="text-box">文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|</div></div></body>
</html>

使用table布局实现
思路
-
文本框样式(.text-box):
- 使用
display: table;属性将容器元素设为表格布局,使其具备表格的一些特性。 - 设置
margin: 10px auto;来实现水平方向上的居中效果。
- 使用
-
文本内容样式(.text-content):
- 使用
display: table-cell;属性使文本内容元素具备表格单元格的特性,可以让其在垂直方向上撑满整个父元素。
- 使用
通过这些样式的组合,实现了两个不同大小的文本框,其中文本内容在第一个文本框中单行显示并在水平方向上居中,而在第二个文本框中,文本内容可以多行显示,仍然在水平方向上保持居中。表格布局的使用在这里能够提供一些表格特性,同时 table-cell 元素的特性确保了垂直方向上的撑满效果-撑满时就是向左对齐的效果。
源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.text-box {display: table;margin: 10px auto;background: skyblue;}.text-content {display: table-cell;background: red;}</style></head><body><div class="text-box"><div class="text-content"><p>文字少-居中对齐,文字多-左对齐|</p></div></div><div class="text-box"><div class="text-content"><p>文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|</p></div></div></body>
</html>

使用bfc实现
思路
-
容器样式(.container):正常的块级元素,内部是正常的块级作用域。 -
文本框样式(.text-box):width: fit-content;让子元素有了一个与文本大小的宽度。margin: 0px auto;通过BFC让其可以水平居中。
在文本少时,子元素宽度等于文本长度,但父容器让其居中,就表现出子元素中文本是居中的。
而文本多时,子元素宽度等于容器长度,虽然父容器也让子元素居中,子元素也在父容器中居中了。不过子元素中文本向左对齐,于是用户看到的就是子元素文本的向左对齐的表现形式。
源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>.container {background-color: blue;margin: 10px 0px 0px 0px;}.text-box {margin: 0px auto;width: fit-content;background-color: red;}</style></head><body><div class="container"><div class="text-box">文字少-居中对齐,文字多-左对齐|</div></div><div class="container"><div class="text-box">文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|文字少-居中对齐,文字多-左对齐|</div></div></body>
</html>

相关文章:
纯css实现-让字符串在文字少时显示为居中对齐,而在文字多时显示为左对齐
纯css实现-让字符串在文字少时显示为居中对齐,而在文字多时显示为左对齐 使用flex实现 思路 容器样式(.container): Flex容器的BFC性质使得其内部的子元素(.text-box)在水平方向上能够居中,通过justify-c…...
初学HTMLCSS——盒子模型
盒子模型 盒子:页面中所有的元素(标签),都可以看做是一个 盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局盒子模型组成:内容区域(content&…...
吸猫毛空气净化器哪个好?推荐除猫毛好的宠物空气净化器品牌
如今,越来越多的家庭选择养宠物!虽然家里变得更加温馨,但养宠可能会带来异味和空气中的毛发增多可能会引发健康问题,这也是一个大问题。 但我不想家里到处都是异味,尤其是便便的味道,所以很需要一款能够处…...
【玩转408数据结构】线性表——双链表、循环链表和静态链表(线性表的链式表示 下)
知识回顾 在前面的学习中,我们已经了解到了链表(线性表的链式存储)的一些基本特点,并且深入的研究探讨了单链表的一些特性,我们知道,单链表在实现插入删除上,是要比顺序表方便的,但是…...
分布式概念
分布式概念 一、分布式介绍1.1 分布式计算1.1.1 分布式计算的方法1.1.1 分布式计算与互联网的普及1.1.2 分布式计算项目1.1.3 参与计算 1.2 分布式存储系统1.2.1 P2P 数据存储系统1.2.2 云存储系统 1.3 应用 二、分布式基础概念2.1 微服务2.2 集群2.3 分布式2.4 节点2.5 远程调…...
vue中的ref/reactive区别及原理
Vue中的ref和reactive是两种不同的数据响应式管理方式。 ref是Vue 3中新加入的特性,它可以将一个普通的JavaScript对象转换为响应式对象。通过ref创建的响应式对象在访问和修改时会自动触发重新渲染。ref返回的是一个包含value属性的对象,访问或修改数据…...
深度学习介绍与环境搭建
深度学习介绍与环境搭建 慕课大学人工智能学习笔记,自己学习记录用的。(赋上连接) https://www.icourse163.org/learn/ZUCC-1206146808?tid1471365447#/learn/content?typedetail&id1256424053&cid1289366515人工智能、机器学习与…...
QT C++实践|超详细数据库的连接和增删改查操作|附源码
0:前言 🪧 什么情况需要数据库? 1 大规模的数据需要处理(比如上千上万的数据量)2 需要把数据信息存储起来,无论是本地还是服务上,而不是断电后数据信息就消失了。 如果不是上面的原因化,一般…...
matlab:涉及复杂函数图像的交点求解
matlab:涉及复杂函数图像的交点求解 在MATLAB中求解两个图像的交点是一个常见的需求。本文将通过一个示例,展示如何求解两个图像的交点,并提供相应的MATLAB代码。 画出图像 首先,我们需要绘制两个图像,以便直观地看…...
Unity(第二十二部)官方的反向动力学一般使用商城的IK插件,这个用的不多
反向动力学(Inverse Kinematic,简称IK)是一种通过子节点带动父节点运动的方法。 正向动力学 在骨骼动画中,大多数动画是通过将骨架中的关节角度旋转到预定值来生成的,子关节的位置根据父关节的旋转而改变,这…...
nginx反向代理,获取客户端ip
一、获取客户端ip代码 /*** description: 获取客户端IP* return string*/ public static function getClientIp(){$ip ;if(getenv(HTTP_CLIENT_IP) && strcasecmp(getenv(HTTP_CLIENT_IP),unknown)){$ip getenv(HTTP_CLIENT_IP);}else if(getenv(HTTP_X_FORWARDED_F…...
13 Codeforces Round 886 (Div. 4)G. The Morning Star(简单容斥)
G. The Morning Star 思路:用map记录x,y,以及y-x、yx从前往后统计一遍答案即可公式 a n s c n t [ x ] c n t [ y ] − 2 ∗ c n t [ x , y ] c n t [ y x ] c n t [ y − x ] anscnt[x]cnt[y]-2 * cnt[x,y]cnt[yx]cnt[y-x] anscnt[x]…...
CLion 2023:专注于C和C++编程的智能IDE mac/win版
JetBrains CLion 2023是一款专为C和C开发者设计的集成开发环境(IDE),它集成了许多先进的功能,旨在提高开发效率和生产力。 CLion 2023软件获取 CLion 2023的智能代码编辑器提供了丰富的代码补全和提示功能,使您能够更…...
数据可视化基础与应用-02-基于powerbi实现连锁糕点店数据集的仪表盘制作
总结 本系列是数据可视化基础与应用的第02篇,主要介绍基于powerbi实现一个连锁糕点店数据集的仪表盘制作。 数据集描述 有一个数据集,包含四张工作簿,每个工作簿是一张表,其中可以销售表可以划分为事实表,产品表&am…...
前后端分离Vue+nodejs酒店公寓客房预订管理系统udr7l-java-php-django-springboot
本系统的设计与实现共包含13个表:分别是关于我们信息表,配置文件信息表,公寓信息评论表信息表,公寓入住信息表,公寓退房信息表,公寓信息信息表,公寓预订信息表,系统公告信息表,收藏表…...
VUE打包的dist文件放到后端一起发布
背景 前后端分离开发的项目,在部署时为了方便部署,使用集成部署的方式(即前后端在一起部署的方式) 问题 直接将前端打包好的dist文件夹下的内容,放到后端项目的resource/static目录下,但是在启动访问时发…...
React入门之React_渲染基础用法和class实例写法
渲染元素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>04元素渲染</title><script src&…...
Git自动忽略dll文件的问题
检查了半天发现是sourcetreee的全局忽略文件导致, 从里面删除dll即可。 我是干脆直接删了全局忽略,太恶心了,如下: #ignore thumbnails created by windows Thumbs.db #Ignore files build by Visual Studio *.exe .vsconfig .s…...
sql中如何实现递归
在SQL中,递归通常是通过使用公用表表达式(Common Table Expressions,CTE)来实现的。CTE允许你定义一个临时的结果集,该结果集可以在一个SELECT、INSERT、UPDATE或DELETE语句的主体中被引用。 递归CTE有两个关键部分&a…...
GPT 的基础 - T(Transformer)
我们知道GPT的含义是: Generative - 生成下一个词 Pre-trained - 文本预训练 Transformer - 基于Transformer架构 我们看到Transformer模型是GPT的基础,这篇博客梳理了一下Transformer的知识点。 BERT: 用于语言理解。(Transformer的Encoder…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...
