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

    你还在为居中而烦恼吗,水平居中多个元素、创建响应式布局、垂直和水平同时居中内容。它,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:允许单个项目有与其他项目不一样的对齐方式

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/47943.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

el-popover嵌套select弹窗点击实现自定义关闭

需求 el-popover弹窗内嵌套下拉选择框&#xff0c;点击el-popover弹出外部区域需关闭弹窗&#xff0c;点击查询、重置需关闭弹窗&#xff0c; 实现 根据需求要自定义弹窗的关闭和显示&#xff0c;首先想到的是visible属性&#xff0c;在实现过程中经过反复的测验&#xff0…

区块链技术实现数字电网内数据可信共享 |《超话区块链》直播预告

随着全球电力市场朝着构建“SmartGrid”和“IntelliGrid”的目标发展&#xff0c;国内电力公司也提出了构建“数字电网”的愿景。清大科越推出新型电力系统区块链服务平台&#xff0c;通过便捷的建链、上链、用链及治链能力&#xff0c;有效解决数字电网各主体间数据共享的信任…

为什么要从C语言开始编程

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C语言的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;很多小伙伴在入门编程时。都…

docker的学习(一):docker的基本概念和命令

简介 docker的学习&#xff0c;基本概念&#xff0c;以及镜像命令和容器命令的使用 docker docker的基本概念 一次镜像&#xff0c;处处运行。 在部署程序的过程中&#xff0c;往往是很繁琐的&#xff0c;要保证运行的环境&#xff0c;软件的版本&#xff0c;配置文件&…

安装 Maven

安装 Maven 的步骤&#xff1a; 1. 访问 Maven 官方网站: https://maven.apache.org/download.cgi 2. 下载 Maven 的二进制文件 3. 解压下载的文件到希望安装的目录 4. 将 Maven 的 bin 目录添加到您的系统环境变量 PATH 中&#xff08;配置环境变量&#xff09; 这个步骤可…

Jupyter notebook如何快速的插入一张图片?如何控制插入图片的缩放、靠左展示(ChatGPT)

在Jupyter Notebook中&#xff0c;你可以使用Markdown语法快速插入图片&#xff0c;并且可以通过HTML标签来控制图片的展示方式和缩放。 注意&#xff1a;以下所有操作都有一个前提&#xff0c;即选择Cell-CellType-Markdown 1. 快速插入图片 要在Jupyter Notebook中插入图…

澎湃算力 玩转AI 华为昇腾AI开发板——香橙派OriengePi AiPro边缘计算案例评测

澎湃算力 玩转AI 华为昇腾AI开发板 香橙派OriengePi AiPro 边缘计算案例评测 人工智能&#xff08;AI&#xff09;技术正以前所未有的速度改变着我们的生活、工作乃至整个社会的面貌。作为推动这一变革的关键力量&#xff0c;边缘计算与AI技术的深度融合正成为行业发展的新趋势…

Redis持久化(AOF和RDB)

目录 前言 一.RDB 1.1手动执行 1.2自动执行 二.AOF 2.1重写机制 三.混合持久化 Redis的学习专栏&#xff1a;http://t.csdnimg.cn/a8cvV 前言 持久化&#xff0c;在之前&#xff0c;我们接触这个词汇是在mysql数据库当中的事务四大特性里。 持久性&#xff1a;指一旦事…

Linux网络编程之UDP

文章目录 Linux网络编程之UDP1、端口号2、端口号和进程ID的区别3、重新认识网络通讯过程4、UDP协议的简单认识5、网络字节序6、socket编程接口6.1、socket常见接口6.2、sockaddr通用地址结构 7、简单的UDP网络程序7.1、服务器响应程序7.2、服务器执行命令行7.3、服务器英语单词…

vue学习笔记(十)——Vuex(状态管理,组件间共享数据)

1. vuex基础-介绍 1.1 为什么会有Vuex ? 在现代 Web 开发复杂多变的需求驱动之下&#xff0c;组件化开发已然成为了事实上的标准。然而大多数场景下的组件都并不是独立存在的&#xff0c;而是相互协作共同构成了一个复杂的业务功能。 组件间的通信成为了必不可少的开发需求。…

《Linux运维总结:基于ARM64架构CPU使用docker-compose一键离线部署单机版tendis2.4.2》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、部署背景 由于业务系统的特殊性&#xff0c;我们需要面对不同的客户部署业务系统&#xff0…

数学建模——快递包裹装箱优化问题(2023年长三角数学建模A题问题一、问题二)

快递包裹装箱优化问题 2022 年&#xff0c;中国一年的包 裹已经超过1000 亿件&#xff0c;占据了全球快递事务量的一半以上。近几年&#xff0c;中国每年新增包裹数量相当于美国整个国家一年的包裹数量&#xff0c;十年前中国还是物流成本最昂贵的国家&#xff0c;当前中国已经…

【IC前端虚拟项目】sanity_case的编写与通包测试

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 在花了大力气完成reference model之后,整个验证环境的搭建就完成了,再多看一下这个结构然后就可以进行sanity_case和通包测试: 关于sanity_case和通包测试我在很多篇文章中说过好多次了在这里就不赘述…

el-menu弹出菜单样式不生效

1. 使用 ruoyi 项目时出现的问题。 <template><el-menu:default-active"activeMenu":collapse"false":unique-opened"true"class"container":collapse-transition"true"mode"horizontal"><sideba…

华为od 100问 持续分享6-入职体检

我是一名软件开发培训机构老师&#xff0c;我的学生已经有上百人通过了华为OD机试&#xff0c;学生们每次考完试&#xff0c;会把题目拿出来一起交流分享。 重要&#xff1a;2024年5月份开始&#xff0c;考的都是OD统一考试&#xff08;D卷&#xff09;&#xff0c;题库已经整…

Linux驱动开发-05APP和驱动的交互方式

一、传输数据 APP和驱动: copy_to_usercopy_from_user驱动和硬件: 各个子系统的函数通过ioremap映射寄存器地址后,直接访问寄存器二、APP使用驱动的四种方式 驱动程序:提供能力,不提供策略 非阻塞(查询)(应用程序访问底层驱动时(read、write时),驱动没有数据不等待,…

基于 CNN(二维卷积Conv2D)+LSTM 实现股票多变量时间序列预测(PyTorch版)

前言 系列专栏:【深度学习&#xff1a;算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域&#xff0c;讨论了各种复杂的深度神经网络思想&#xff0c;如卷积神经网络、循环神经网络、生成对…

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

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

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

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

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

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