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

display: flex 和 justify-content: center 强大居中

news 2026/3/29 14:41:10

    你还在为居中而烦恼吗，水平居中多个元素、创建响应式布局、垂直和水平同时居中内容。它，display: flex 和 justify-content: center 都可以完成！

display: flex：将元素定义为flex容器
justify-content：定义项目在主轴上的对齐方式

例1：导航菜单居中 

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>nav ul {display: flex;justify-content: center;list-style-type: none;padding: 0;}nav li {font-size: 16px;margin: 0 10px;}</style>
</head>
<body><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">联系</a></li></ul></nav>
</body>
</html>

 

 

例2： 图片和文字并排居中

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {display: flex;justify-content: center;align-items: center;}.container img {margin-right: 10px;width: 30px;height: 30px;}</style>
</head>
<body><div class="container"><img src="../../Web/static/img/LA.png" alt="Logo"><h1>公司名称</h1></div>
</body>
</html>

 

例3：多个块级元素居中

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.features {display: flex;justify-content: center;flex-wrap: wrap;}.feature {margin: 10px;padding: 20px;background-color: #f0f0f0;}</style>
</head>
<body><div class="features"><div class="feature">功能1</div><div class="feature">功能2</div><div class="feature">功能3</div></div>
</body>
</html>

其余属性

容器属性：

  • display: flex：将元素定义为flex容器
  • flex-direction：定义主轴方向（row, column, row-reverse, column-reverse）
  • justify-content：定义项目在主轴上的对齐方式
  • align-items：定义项目在交叉轴上的对齐方式
  • flex-wrap：定义是否允许项目换行

项目属性：

  • flex-grow：定义项目的放大比例
  • flex-shrink：定义项目的缩小比例
  • flex-basis：定义项目在分配多余空间之前的初始大小
  • align-self：允许单个项目有与其他项目不一样的对齐方式

 

相关文章：

display: flex 和 justify-content: center 强大居中

你还在为居中而烦恼吗&#xff0c;水平居中多个元素、创建响应式布局、垂直和水平同时居中内容。它&#xff0c;display: flex 和 justify-content: center 都可以完成&#xff01; display: flex&#xff1a;将元素定义为flex容器 justify-content&#xff1a;定义项目在主轴…...

编程日记 2024/7/20 5:17:39

记录贴-idea导入别人的项目

链接: IDEA导入Web项目的三种方式 链接: idea怎么导入别人的maven项目 链接: IDEA 如何导入别人的javaweb项目进行部署...

编程日记 2024/7/20 5:16:38

算法第九天：leetcode59.螺旋矩阵II

给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&#xff1a;n 1 输出&am…...

编程日记 2024/7/20 5:15:37

androidkiller重编译apk失败的问题

androidkiller重编译apk失败 参考&#xff1a; https://blog.csdn.net/qq_38393271/article/details/127057187 https://blog.csdn.net/hkz0704/article/details/132855098 已解决&#xff1a;“apktool” W: invalid resource directory name:XXX\res navigation 关键是编译…...

编程日记 2024/7/20 5:14:36

matlab中plot的一些用法

文章目录 一、基本用法二、绘制多个数据集三、设置线型、颜色四、添加标题和标签五、添加图例六、设置轴范围七、绘制网格八、 在同一图中绘制多个子图九、绘制带误差条的图十、绘制半对数图和对数图十一、绘制填充区域图十二、综合案例 一、基本用法 x 0:0.1:10; y sin(x);…...

编程日记 2024/7/20 5:13:34

Elasticsearch：Retrievers 介绍 - Python Jupyter notebook

在今天的文章里&#xff0c;我是继上一篇文章 “Elasticsearch&#xff1a;介绍 retrievers - 搜索一切事物” 来使用一个可以在本地设置的 Elasticsearch 集群来展示 Retrievers 的使用。在本篇文章中&#xff0c;你将学到如下的内容&#xff1a; 从 Kaggle 下载 IMDB 数据集…...

编程日记 2024/7/20 5:12:33

5 webSocket

webSockets 简介 什么是 websocket webSockets 是一种先进的技术;它可以在用户的浏览器和服务器之间打开交互式通信会话;使用此 API,您可以向服务器发送消息并接收事件驱动的响应,而无需通过轮询服务器的方式以获得响应 websocket 是一种网络通信协议,是HTML5开始提供的一种在单…...

编程日记 2024/7/20 5:10:32

PD芯片诱骗取电电压给后端小家电用电：LDR6328

在智能家居浪潮的推动下&#xff0c;小家电作为日常生活中不可或缺的一部分&#xff0c;其供电方式的创新与优化正逐步成为行业关注的焦点。随着快充技术的普及&#xff0c;特别是Power Delivery&#xff08;PD&#xff09;协议的广泛应用&#xff0c;一种新型供电模式——利用…...

编程日记 2024/7/20 5:09:31

深入解析Linux文件权限管理：掌握`chmod`和`chown`命令

深入解析Linux文件权限管理&#xff1a;掌握chmod和chown命令 深入解析Linux文件权限管理&#xff1a;掌握chmod和chown命令 大纲&#xff1a;摘要&#xff1a;内容&#xff1a; 1. 引言2. 理解文件权限3. 使用chmod命令4. 使用chown命令5. 综合应用6. 常见问题与解决方案7. 结…...

编程日记 2024/7/20 5:08:30

3.Implementing Controllers

Implementing Controllers 控制器提供了对应用程序行为的访问&#xff0c;这些行为通常通过一个服务接口来定义。控制器解释用户输入&#xff0c;并将其转换为由视图展示给用户的模型。Spring 以非常抽象的方式实现了控制器&#xff0c;使得你能够创建各种各样的控制器。 Spr…...

编程日记 2024/7/20 5:07:29

如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

Git Flow、GitHub Flow 和 GitLab Flow 是几种常见的 Git 分支管理策略&#xff0c;它们帮助开发团队更高效地管理代码库和协同开发。 Git Flow Git Flow 是一种功能强大的分支管理模型&#xff0c;由 Vincent Driessen 提出&#xff0c;适用于发布周期较长、需要严格管理发布…...

编程日记 2024/7/20 5:05:27

Java垃圾收集器选择与优化策略

1.垃圾收集算法有哪些，可以聊一下吗？ 如何确定一个对象是垃圾？ 要想进行垃圾回收，得先知道什么样的对象是垃圾。 1.1 引用计数法 对于某个对象而言，只要应用程序中持有该对象的引用，就说明该对象不是垃圾。如果一个对象没有任何指针对其引用，它就是垃圾。 弊端：如果…...

编程日记 2024/7/20 5:04:26

django命令

Django 的命令行工具 django-admin&#xff08;或 manage.py 中的 manage 函数&#xff09;提供了一系列的命令&#xff0c;用于执行各种管理任务。 1. check: 检查项目的 full 路径&#xff0c;确保没有错误配置。 2. compilemessages: 编译 .po 文件中的翻译&#xff0c;生…...

编程日记 2024/7/20 5:02:24

23种设计模式之命令模式

命令模式 1、定义 命令模式&#xff1a;将一个请求封装为一个对象&#xff0c;从而可用不同的请求对客户进行参数化&#xff0c;对请求排队或者记录请求日志&#xff0c;以及支持可撤销的操作 2、命令模式结构 Command&#xff08;抽象命令类&#xff09;&#xff1a;一般是…...

编程日记 2024/7/20 5:00:23

esp8266模块（1）

1WiFi的两种模式 1AP模式&#xff1a;ESP8266模块充当一个无线接入点&#xff0c;类似于一个路由器。&#xff08;如手机开热点&#xff09; 2Station模式&#xff08;sta&#xff09;&#xff1a;ESP8266模块作为客户端连接到一个现有的WiFi网络。&#xff08;如路由器&#…...

编程日记 2024/7/20 4:59:22

LDR6020：重塑iPad一体式有线键盘体验的创新力量

在移动办公与娱乐日益融合的时代&#xff0c;iPad凭借其强大的性能和便携性&#xff0c;成为了众多用户不可或缺的生产力工具。然而&#xff0c;为了进一步提升iPad的使用体验&#xff0c;一款高效、便捷的键盘成为了不可或缺的配件。今天&#xff0c;我们要介绍的&#xff0c;…...

编程日记 2024/7/20 4:58:21

ArcGIS Pro SDK （九）几何 9 立方贝塞尔线段

ArcGIS Pro SDK &#xff08;九&#xff09;几何 9 立方贝塞尔线段 文章目录 ArcGIS Pro SDK &#xff08;九&#xff09;几何 9 立方贝塞尔线段1 构建立方贝塞尔线段 - 从坐标2 构建立方贝塞尔线段 - 从地图点3 构造立方贝塞尔线段 - 从映射点的枚举4 立方贝塞尔线段生成器属性…...

编程日记 2024/7/20 4:57:20

c语言之 *指针与 **指针

*n 一级指针&#xff1a; &nn*n自身地址指向地址指向地址值 **s 二级指针&#xff1a; &ss*s**s自身地址一级指针地址一级指针指向地址一级指针指向地址值 CHILD *walk, *next, *tmp_child, **scan;next walk->next scan &walk->next; while (*scan) { …...

编程日记 2024/7/20 4:56:19

navicat 导入 sql 遇到的问题

错误1 [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near &#xfeff;SET FOREIGN_KEY_CHECKS 0;DROP TABLE IF EXISTS tmp_tables; CREATE TABLE at line 1 [Err] &…...

编程日记 2024/7/20 4:55:19

压缩pdf大小的方法 指定大小软件且清晰

在数字化时代&#xff0c;pdf文件因其良好的兼容性和稳定性&#xff0c;已成为文档分享的主流格式。然而&#xff0c;高版本的pdf文件往往体积较大&#xff0c;传输和存储都相对困难。本文将为您详细介绍几种简单有效的方法&#xff0c;帮助您减小pdf文件的大小&#xff0c;让您…...

编程日记 2024/7/20 4:53:17

用Python实战N皇后：从回溯的O(n!)到启发式修补的秒解，附完整性能对比代码

用Python实战N皇后&#xff1a;从回溯的O(n!)到启发式修补的秒解&#xff0c;附完整性能对比代码 N皇后问题作为经典的算法挑战&#xff0c;一直是检验编程技巧和算法思维的试金石。当棋盘规模n增大时&#xff0c;不同算法的性能差异会呈现指数级分化——回溯法在n15时可能需要…...

编程新知 2026/3/29 13:18:33

OpenClaw人人养虾：网络模型

Gateway 支持多种网络拓扑&#xff08;Network Topology&#xff09;&#xff0c;从纯本地到跨互联网远程访问。本文档介绍各种连接架构及其配置。 网络拓扑概览 ┌─────────────────────────────────────────────┐ │ …...

编程新知 2026/3/29 12:32:12

不用标注数据！手把手教你用SAM 3和SegEarth-OV3搞定遥感图像分割（附避坑指南）

零标注实战&#xff1a;用SAM 3与SegEarth-OV3实现遥感图像智能分割 当你在处理城市违建排查任务时&#xff0c;面对海量航拍图却找不到足够标注数据&#xff1b;当突发自然灾害需要快速评估受损区域&#xff0c;但现有模型无法识别新型地物——这些正是遥感图像分析中最棘手的…...

编程新知 2026/3/29 12:06:02

基于LSTM时间序列预测思想优化百川2-13B的对话连贯性

基于LSTM时间序列预测思想优化百川2-13B的对话连贯性 你有没有遇到过这种情况&#xff1f;和一个大模型聊得正起劲&#xff0c;聊了十几轮甚至几十轮之后&#xff0c;你突然发现&#xff0c;它好像“失忆”了。你之前明明告诉过它你的名字、你的职业&#xff0c;甚至你们刚刚讨…...

编程新知 2026/3/29 10:36:58

别再手动录单了！手把手教你用U9C OpenAPI打通钉钉审批流（含完整配置流程）

别再手动录单了&#xff01;手把手教你用U9C OpenAPI打通钉钉审批流&#xff08;含完整配置流程&#xff09; 当财务部的张经理第17次因为手工录入错误被审计部门退回单据时&#xff0c;他摔掉键盘的冲动都有了。这场景在很多企业司空见惯——U9C系统承载着核心业务数据&#…...

编程新知 2026/3/29 10:06:17

用tcpreplay+Wireshark搭建网络攻防实验环境：手把手教你复现渗透测试流量

实战指南&#xff1a;用tcpreplay与Wireshark构建网络攻防实验环境 在网络安全领域&#xff0c;理论知识的掌握固然重要&#xff0c;但真正的技能提升往往来自于实战演练。然而&#xff0c;直接在真实网络环境中进行渗透测试或攻击模拟不仅存在法律风险&#xff0c;还可能对生…...

编程新知 2026/3/29 8:53:55

数字记忆策展：WeChatMsg与数据主权时代的个人记忆管理

数字记忆策展&#xff1a;WeChatMsg与数据主权时代的个人记忆管理 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeCha…...

编程新知 2026/3/29 8:51:55

Turborepo monorepo：别再手动管理多包了

Turborepo monorepo&#xff1a;别再手动管理多包了 毒舌时刻这代码写得跟网红滤镜似的——仅供参考。各位前端同行&#xff0c;咱们今天聊聊 Turborepo。别告诉我你还在手动管理 monorepo&#xff0c;那感觉就像用算盘管理仓库——能管&#xff0c;但累死人。 为什么你需要 T…...

编程新知 2026/3/29 8:13:40

PostgreSQL杂谈 13—GIN索引的优化策略与实战调优

1. GIN索引的核心原理与性能瓶颈 GIN&#xff08;Generalized Inverted Index&#xff09;作为PostgreSQL中的"万能工具箱"&#xff0c;特别擅长处理数组、全文搜索这类"一对多"的数据关系。它的核心设计借鉴了搜索引擎的倒排索引思想&#xff0c;但比传统…...

编程新知 2026/3/29 7:51:31

美团天天神券自动化脚本终极指南：告别手动抢券，每月轻松省下200元

美团天天神券自动化脚本终极指南&#xff1a;告别手动抢券&#xff0c;每月轻松省下200元 【免费下载链接】meituan-shenquan 美团 天天神券 地区活动 自动化脚本 项目地址: https://gitcode.com/gh_mirrors/me/meituan-shenquan 你是否经常在11点、17点、21点这三个关键…...

编程新知 2026/3/29 6:32:26