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

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

news 文章来源：https://blog.csdn.net/naozibuok/article/details/140560565 2024/11/19 12:30:50

    你还在为居中而烦恼吗，水平居中多个元素、创建响应式布局、垂直和水平同时居中内容。它，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

PHP上门按摩专业版防东郊到家系统源码小程序

&#x1f486;‍♀️【尊享级体验】上门按摩专业版&#xff0c;告别东郊到家&#xff0c;解锁全新放松秘籍&#xff01;&#x1f3e0;✨ &#x1f525;【开篇安利&#xff0c;告别传统束缚】&#x1f525; 亲们&#xff0c;是不是厌倦了忙碌生活中的疲惫感&#xff1f;想要享…...

编程日记 2024/7/20 4:52:15

从微软发iPhone，聊聊企业设备管理

今天讲个上周的旧闻&#xff0c;微软给员工免费发iPhone。其实上周就有很多朋友私信问我&#xff0c;在知乎上邀请我回答相关话题&#xff0c;今天就抽点时间和大家一起聊聊这事。我不想讨论太多新闻本身&#xff0c;而是更想聊聊事件的主要原因——微软企业设备管理&#xff0…...

编程日记 2024/7/20 4:51:14

抖音/腾讯/百度ocpm深度回传如何操作？广告投放双出价的投放技巧？

要实现抖音、腾讯和百度的OCPM&#xff08;Optimized Cost Per Mille&#xff09;深度回传&#xff0c;可以通过借助第三方平台&#xff0c;例如&#xff08;转化宝&#xff09;实现广告数据精准回传&#xff0c;如此之外&#xff0c;在广告投放过程中还需要注重这些方面。 转化…...

编程日记 2024/7/20 4:50:13

DPKG（Debian / Ubuntu包管理工具）的深入探索与使用

DPKG&#xff08;Debian / Ubuntu包管理工具&#xff09;的深入探索与使用 在Linux世界中&#xff0c;特别是基于Debian及其衍生系统&#xff08;如Ubuntu&#xff09;的环境中&#xff0c;dpkg是管理Debian软件包&#xff08;.deb文件&#xff09;的核心工具。它不仅用于安装…...

编程日记 2024/7/20 4:49:12

Godot学习笔记2——GDScript变量与函数

Godot使用的编程语言是GDS&#xff0c;语法上与python有些类似。 一、代码编写界面 在新建的Godot项目中&#xff0c;点击“创建根节点”中的“其他节点”&#xff0c;选择“Node”。 点击场景界面右上角的绿色加号&#xff0c;路径处重新命名&#xff0c;模板选择“Empty”&…...

编程日记 2024/7/20 4:48:11

golang开发环境搭建与踩坑记录

文章目录 一、安装下载1、go环境2、ide 二、基本使用1、运行2、结构体与方法函数指针3、闭包4、指针5、map6、接口7、异常 三、包管理1、go mod语法2、项目下载所有依赖 一、安装下载 1、go环境 下载地址&#xff1a;https://go.dev/dl/ 或者&#xff1a;https://golang.goog…...

编程日记 2024/7/20 4:46:09

单机、集群、分布式服务器比较：

1. 单机服务器的瓶颈&#xff1a; 单机服务器&#xff1a;一台服务器独立运行一个工程所需的全部的业务模块 受限于服务器硬件资源&#xff0c;所承受用户并发量受限&#xff0c;32位linux操作系统最大并发量为两万任一模块的变动和修改&#xff0c;都会导致整个项目代码重新编…...

编程日记 2024/7/20 4:45:08

NoSql选择题解

1. (单选题)以下不属于ACID原则的是( )。 A. 相对性 B. 原子性 C. 隔离性 D. 持久性 正确答案: A :相对性; 2. (单选题)以下NoSQL数据库中&#xff0c;哪个是内存数据库&#xff08;&#xff09;。 A. Bigtable B. Redis C. Hbase D. MongoDB 正确答案: B :Redis; …...

编程日记 2024/7/20 4:41:04

国内新能源汽车芯片自给，承认差距，任重道远

【科技明说 &#xff5c; 科技热点关注】 据近日工信部电子五所元器件与材料研究院高级副院长罗道军表示&#xff0c;中国拥有最大的新能源车产能&#xff0c;芯片用量也是越来越多。但是芯片的自给率目前不到10%&#xff0c;是结构性的短缺。 中国拥有最大新能源车产能&#…...

编程日记 2024/7/20 4:40:04

反爬虫策略中的IP地址轮换如何实现？挑战与对策

当今互联网时代&#xff0c;各类网站、网络平台背后隐藏着大量数据&#xff0c;广告数据收集、市场数据收集都需要依托爬虫技术&#xff0c;但很多网站通过反爬虫技术限制或屏蔽爬虫的访问&#xff0c;这给数据收集带来不小的挑战。 为了规避这些反爬虫策略&#xff0c;开发人…...

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

广商网/短视频seo营销

如下&#xff1a; 中英文都可以&#xff0c;可以和cmd5网站上的比较&#xff0c;绝对是一模一样。 package com.vastis.ext.huishan;import java.io.UnsupportedEncodingException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException;public…...

编程日记 2024/11/19 11:02:39

商丘网站建设流程/yahoo引擎入口

美国当地时间五月26日&#xff0c;微软已经在MSDN上放出VS2010简体中文版供订阅用户下载。相关信息如下&#xff1a; Visual Studio 2010 Ultimate (x86) - DVD (Chinese-Simplified) 文件名 cn_visual_studio_2010_ultimate_x86_dvd_532347.iso 发布日期 (UTC): 5/26/2010 3:…...

编程日记 2024/11/19 9:06:11

网站备案 多ip/免费创建个人博客网站

学习目的及目标 掌握UDP原理和工作过程 掌握乐鑫ESP32的UDP的程序设计 主要掌握UDP源码过程UDP科普(来自百度百科)UDP 是User Datagram Protocol的简称&#xff0c; 中文名是用户数据报协议&#xff0c;是OSI(Open System Interconnection&#xff0c;开放式系统互联) 参考模型…...

编程日记 2024/11/19 6:28:22

数学网站怎么做的/济南网站建设

好久之前做的题了QWQ 现在来补一发博客 一道神仙题啊。。qwq 首先&#xff0c;我们可以看出来&#xff0c;我们如果对于每个点维护一个\(val\)&#xff0c;表示他的直系儿子中有几个表现为1的。 那么\(val[x]>>1\) 就是他反应的类型 这样十分便于我们计算一开始的\(val\)…...

编程日记 2024/11/19 0:02:24

迎访问中国建设银行网站_/深圳seo

vi /etc/sysconfig/network 内容&#xff1a; NETWORKINGyes HOSTNAMEhadoop000 vi /etc/hosts 内容&#xff1a;ip 主机名转载于:https://www.cnblogs.com/liweizai/p/7807800.html...

编程日记 2024/11/18 19:42:10

建设网站联系方式/seo工作流程图

QByteArray ba("Hello world");char *data = ba.data();while (*data) {cout << "[" << *data...

编程日记 2024/11/18 18:35:09