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

纯css实现-让字符串在文字少时显示为居中对齐,而在文字多时显示为左对齐

纯css实现-让字符串在文字少时显示为居中对齐,而在文字多时显示为左对齐

使用flex实现

思路

  1. 容器样式(.container):

    • Flex容器的BFC性质使得其内部的子元素(.text-box)在水平方向上能够居中,通过justify-content: center;实现。
  2. 文本框样式(.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>

使用flex实现

使用text-align实现

思路

  1. 容器样式(.container):

    • 使用 text-align: center; 将容器内的文本内容在水平方向上居中对齐。
  2. 文本框样式(.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>

使用text-align实现

使用table布局实现

思路

  1. 文本框样式(.text-box):

    • 使用 display: table; 属性将容器元素设为表格布局,使其具备表格的一些特性。
    • 设置 margin: 10px auto; 来实现水平方向上的居中效果。
  2. 文本内容样式(.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>

使用table布局实现

使用bfc实现

思路

  1. 容器样式(.container):正常的块级元素,内部是正常的块级作用域。

  2. 文本框样式(.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>

使用bfc实现

相关文章:

纯css实现-让字符串在文字少时显示为居中对齐,而在文字多时显示为左对齐

纯css实现-让字符串在文字少时显示为居中对齐&#xff0c;而在文字多时显示为左对齐 使用flex实现 思路 容器样式&#xff08;.container&#xff09;: Flex容器的BFC性质使得其内部的子元素&#xff08;.text-box&#xff09;在水平方向上能够居中&#xff0c;通过justify-c…...

初学HTMLCSS——盒子模型

盒子模型 盒子&#xff1a;页面中所有的元素&#xff08;标签&#xff09;&#xff0c;都可以看做是一个 盒子&#xff0c;由盒子将页面中的元素包含在一个矩形区域内&#xff0c;通过盒子的视角更方便的进行页面布局盒子模型组成&#xff1a;内容区域&#xff08;content&…...

吸猫毛空气净化器哪个好?推荐除猫毛好的宠物空气净化器品牌

如今&#xff0c;越来越多的家庭选择养宠物&#xff01;虽然家里变得更加温馨&#xff0c;但养宠可能会带来异味和空气中的毛发增多可能会引发健康问题&#xff0c;这也是一个大问题。 但我不想家里到处都是异味&#xff0c;尤其是便便的味道&#xff0c;所以很需要一款能够处…...

【玩转408数据结构】线性表——双链表、循环链表和静态链表(线性表的链式表示 下)

知识回顾 在前面的学习中&#xff0c;我们已经了解到了链表&#xff08;线性表的链式存储&#xff09;的一些基本特点&#xff0c;并且深入的研究探讨了单链表的一些特性&#xff0c;我们知道&#xff0c;单链表在实现插入删除上&#xff0c;是要比顺序表方便的&#xff0c;但是…...

分布式概念

分布式概念 一、分布式介绍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中新加入的特性&#xff0c;它可以将一个普通的JavaScript对象转换为响应式对象。通过ref创建的响应式对象在访问和修改时会自动触发重新渲染。ref返回的是一个包含value属性的对象&#xff0c;访问或修改数据…...

深度学习介绍与环境搭建

深度学习介绍与环境搭建 慕课大学人工智能学习笔记&#xff0c;自己学习记录用的。&#xff08;赋上连接&#xff09; https://www.icourse163.org/learn/ZUCC-1206146808?tid1471365447#/learn/content?typedetail&id1256424053&cid1289366515人工智能、机器学习与…...

QT C++实践|超详细数据库的连接和增删改查操作|附源码

0&#xff1a;前言 &#x1faa7; 什么情况需要数据库? 1 大规模的数据需要处理&#xff08;比如上千上万的数据量&#xff09;2 需要把数据信息存储起来&#xff0c;无论是本地还是服务上&#xff0c;而不是断电后数据信息就消失了。 如果不是上面的原因化&#xff0c;一般…...

matlab:涉及复杂函数图像的交点求解

matlab&#xff1a;涉及复杂函数图像的交点求解 在MATLAB中求解两个图像的交点是一个常见的需求。本文将通过一个示例&#xff0c;展示如何求解两个图像的交点&#xff0c;并提供相应的MATLAB代码。 画出图像 首先&#xff0c;我们需要绘制两个图像&#xff0c;以便直观地看…...

Unity(第二十二部)官方的反向动力学一般使用商城的IK插件,这个用的不多

反向动力学&#xff08;Inverse Kinematic&#xff0c;简称IK&#xff09;是一种通过子节点带动父节点运动的方法。 正向动力学 在骨骼动画中&#xff0c;大多数动画是通过将骨架中的关节角度旋转到预定值来生成的&#xff0c;子关节的位置根据父关节的旋转而改变&#xff0c;这…...

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 思路&#xff1a;用map记录x&#xff0c;y&#xff0c;以及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开发者设计的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它集成了许多先进的功能&#xff0c;旨在提高开发效率和生产力。 CLion 2023软件获取 CLion 2023的智能代码编辑器提供了丰富的代码补全和提示功能&#xff0c;使您能够更…...

数据可视化基础与应用-02-基于powerbi实现连锁糕点店数据集的仪表盘制作

总结 本系列是数据可视化基础与应用的第02篇&#xff0c;主要介绍基于powerbi实现一个连锁糕点店数据集的仪表盘制作。 数据集描述 有一个数据集&#xff0c;包含四张工作簿&#xff0c;每个工作簿是一张表&#xff0c;其中可以销售表可以划分为事实表&#xff0c;产品表&am…...

前后端分离Vue+nodejs酒店公寓客房预订管理系统udr7l-java-php-django-springboot

本系统的设计与实现共包含13个表:分别是关于我们信息表&#xff0c;配置文件信息表&#xff0c;公寓信息评论表信息表&#xff0c;公寓入住信息表&#xff0c;公寓退房信息表&#xff0c;公寓信息信息表&#xff0c;公寓预订信息表&#xff0c;系统公告信息表&#xff0c;收藏表…...

VUE打包的dist文件放到后端一起发布

背景 前后端分离开发的项目&#xff0c;在部署时为了方便部署&#xff0c;使用集成部署的方式&#xff08;即前后端在一起部署的方式&#xff09; 问题 直接将前端打包好的dist文件夹下的内容&#xff0c;放到后端项目的resource/static目录下&#xff0c;但是在启动访问时发…...

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的全局忽略文件导致&#xff0c; 从里面删除dll即可。 我是干脆直接删了全局忽略&#xff0c;太恶心了&#xff0c;如下&#xff1a; #ignore thumbnails created by windows Thumbs.db #Ignore files build by Visual Studio *.exe .vsconfig .s…...

sql中如何实现递归

在SQL中&#xff0c;递归通常是通过使用公用表表达式&#xff08;Common Table Expressions&#xff0c;CTE&#xff09;来实现的。CTE允许你定义一个临时的结果集&#xff0c;该结果集可以在一个SELECT、INSERT、UPDATE或DELETE语句的主体中被引用。 递归CTE有两个关键部分&a…...

GPT 的基础 - T(Transformer)

我们知道GPT的含义是&#xff1a; Generative - 生成下一个词 Pre-trained - 文本预训练 Transformer - 基于Transformer架构 我们看到Transformer模型是GPT的基础&#xff0c;这篇博客梳理了一下Transformer的知识点。 BERT: 用于语言理解。&#xff08;Transformer的Encoder…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...