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

news2024/11/13 8:58:54

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

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

相关文章

分享:咕嘎批量查找文件移动存储系统,一次性查找多个PDF文件,如何根据txt文本列出的文件名批量查找指定文件夹里的文件,并复制到新的文件夹,不需要写任何代码,点点鼠标批量处理一次性搞定

简介&#xff1a; 该文介绍了一个批量查找PDF文件&#xff08;不限于找PDF&#xff09;的工具&#xff0c;用于在多级文件夹中快速查找并复制特定文件。用户可以加载PDF库&#xff0c;输入文件名列表&#xff0c;设置操作参数&#xff08;如保存路径、复制或删除&#xff09;及…

一个非常好的美图展示网站整站打包源码,集成了wordpress和开源版ripro主题,可以完美运营。

一个非常好的美图展示网站整站打包源码&#xff0c;集成了wordpress和开源版ripro主题&#xff0c;可以完美运营。 自带了5个多g的美图资源&#xff0c;让网站内容看起来非常大气丰富&#xff0c;可以快速投入运营。 这个代码包&#xff0c;原网站已经稳定运营多年&#xff0…

影响转化率的多元因素分析及定制开发AI智能名片S2B2C商城系统小程序的应用案例

摘要&#xff1a;在互联网时代&#xff0c;转化率是衡量营销活动成功与否的关键指标。本文首先分析了影响转化率的多种因素&#xff0c;包括活动页面的设计、活动的限时性、主题文案的吸引力、从众心理的运用&#xff0c;以及最核心的产品质量与优惠力度。接着&#xff0c;本文…

问题:4、商业保险与政策性保险的主要不同之处是:经营主体不同、经营目标不同、承保机制不同。 #学习方法#其他#学习方法

问题&#xff1a;4、商业保险与政策性保险的主要不同之处是&#xff1a;经营主体不同、经营目标不同、承保机制不同。 参考答案如图所示

SQL Server 使用 OPTION (RECOMPILE) 和查询存储的查询

设置 我们正在使用 WideWorldImporters 数据库&#xff0c;您可以从 Github 下载【sql-server-samples/samples/databases/wide-world-importers at master microsoft/sql-server-samples GitHub】。我正在运行SQL Server 2017 的最新 CU【https://sqlserverbuilds.b…

Adobe国际认证详解-网页设计认证专家行业应用场景解析

在当今数字化时代&#xff0c;网页设计已成为各行各业不可或缺的一环。而网页设计认证专家&#xff0c;作为经过Adobe国际认证体系严格考核的专业人才&#xff0c;正逐渐成为行业内炙手可热的存在。他们凭借深厚的网页设计理论基础和实践经验&#xff0c;为各行各业提供了高质量…

建筑工程企业项目管理系统哪个好?试试企智汇工程项目管理系统

在建筑工程行业中&#xff0c;项目管理的复杂性和挑战性是众所周知的。随着项目规模的扩大和技术的不断进步&#xff0c;传统的管理方法已经难以满足现代建筑工程的需求。企智汇工程项目管理系统应运而生&#xff0c;为建筑工程企业提供了一个全面、智能、高效的解决方案。 一…

“生日悖论”简析——公式计算、代码模拟

“生日悖论”共享生日概率&#xff0c;通项公式计算&#xff0c;代码模拟计算。 (笔记模板由python脚本于2024年07月17日 18:16:40创建&#xff0c;本篇笔记适合会基础编程的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&…

Flutter Dart Macro 宏简化 JSON 序列化

Flutter Dart Macro 宏简化 JSON 序列化 视频 https://youtu.be/gBZYjBmoOcU https://www.bilibili.com/video/BV1tT421a7ev/ 前言 原文 https://ducafecat.com/blog/using-dart-macros-to-simplify-json-serialization 今天我们将会体验 dart 语言新特性 macro 宏&#xff…

Vue3中实现自然滚动表格列表,可调整滚动快慢

实现效果如图所示&#xff0c;可以调整滚动的快慢&#xff0c;可以实现内容高度不够的时候停止滚动的效果。 1.实现原理&#xff1a; 创建一个dom为ul&#xff0c;赋值为当前列表数据&#xff0c;然后拷贝这个dom赋值给第二个ul&#xff0c;然后判断屏幕高度跟滚动高度对比&a…

第三届智能机械与人机交互技术学术会议(IHCIT 2024)

【北航主办丨本届SPIE独立出版丨已确认ISSN号】 第三届智能机械与人机交互技术学术会议&#xff08;IHCIT 2024&#xff09; 2024 3rd International Conference on Intelligent Mechanical and Human-Computer Interaction Technology 2024年7月27日----中国杭州&#xff0…

Redis深度解析:从基础到高级特性,剖析关键技术

一、关于Redis Redis介绍 REmote DIctionary Server(Redis) 是一个由 Salvatore Sanfilippo 写的 key-value 存储系统&#xff0c;是跨平台的非关系型数据库。 Redis 是一个开源的使用 ANSIC 语言编写、遵守 BSD&#xff08;开源协议&#xff09; 协议、支持网络、可基于内存…

Linux云计算 |【第一阶段】ENGINEER-DAY5

主要内容&#xff1a; SELinux、系统故障修复、HTTPD/FTP服务搭建、防火墙策略管理、服务管理 一、SELinux安全制度 SELinux&#xff08;Security-Enhanced Linux&#xff09;&#xff0c;美国NSA国家安全局主导开发&#xff0c;一套增强Linux系统安全的强制访问控制体系&…

6. dolphinscheduler-3.0.0伪集群部署

环境说明&#xff1a; 主机名&#xff1a;cmc01为例 操作系统&#xff1a;centos7 安装部署软件版本部署方式centos7zookeeperzookeeper-3.4.10伪分布式hadoophadoop-3.1.3伪分布式hivehive-3.1.3-bin伪分布式clickhouse21.11.10.1-2单节点多实例dolphinscheduler3.0.0单节…

【JavaScript 算法】拓扑排序:有向无环图的应用

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、算法原理二、算法实现方法一&#xff1a;Kahn算法方法二&#xff1a;深度优先搜索&#xff08;DFS&#xff09;注释说明&#xff1a; 三、应用场景四、总结 拓扑排序&#xff08;Topological Sorting&#xff09;是一种…

测试数据科学家深度学习基础知识的 45 个问题(以及解决方案)

测试数据科学家深度学习基础知识的 45 个问题(以及解决方案) 一、介绍 早在2009年, 深度学习还只是一个新兴领域。只有少数人认为这是一个富有成效的研究领域。今天,它被用于开发应用程序,这些应用程序在一段时间前被认为是困难或不可能做到的。 语音识别、图像识别、在数…

<Qt> 初识Qt

目录 一、项目文件解析 widget.h main.cpp widget.cpp widget.ui .pro文件 二、QT 实现Hello World程序 &#xff08;一&#xff09;按钮控件 1. 纯代码 2. 图形化 &#xff08;二&#xff09;标签控件 1. 纯代码 2. 图形化 三、内存泄漏问题 四、qdebug()的使用…

MySQL(事务、索引)MyBatis

目录 事务 概述 四大特性&#xff08;ACID&#xff09; 索引 结构 语法 MyBatis 数据库连接池 lombok 基本操作--增删改查 根据主键删除 新增 更新 查询&#xff08;根据ID查询&#xff09; 查询&#xff08;条件查询&#xff09; XML映射文件 动态SQL 动态条…

Web安全:未验证的重定向和转发.

Web安全&#xff1a;未验证的重定向和转发. 未验证的重定向和转发漏洞是一种常见的Web安全漏洞&#xff0c;它允许攻击者将用户重定向到一个恶意的URL&#xff0c;而不是预期的安全URL。这种漏洞通常发生在应用程序处理重定向和转发请求时&#xff0c;未能对目标URL进行适当的…

RDMA 高性能架构基本原理与设计方案

在进行本文的学习学习之前&#xff0c;我们先对RDMA是什么做一个简单的科普与认识&#xff1a;一文带你了解什么是RDMA-CSDN博客 目录&#xff1a; 目录&#xff1a; 一、RDMA和传统网络方案的比较 1.1 传统网络方案&#xff1a; 1.1.1 缺点一&#xff1a;以太网卡&#xff0…