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

【CSS入门学习】Flex布局设置div水平、垂直分布与居中

news 2025/9/19 14:14:58

水平平均分布

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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: space-between;           }.item {width: 200px;height: 100px;background-color: antiquewhite;border: 1px solid;}</style>
</head>
<body><div class="container"><div class="item">左侧内容</div><div class="item">中间内容</div><div class="item">右侧内容</div></div>
</body>
</html>

一左一右

将<div class="item">中间内容</div>注释掉，只保留左右两个div：

在这里插入图片描述

还可以分别设置左右div的宽度：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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: space-between;            }.item {width: 200px;height: 100px;background-color: antiquewhite;border: 1px solid;}.left {width: 30%;}.right {width: 60%;}</style>
</head>
<body><div class="container"><div class="item left">左侧内容</div><div class="item right">右侧内容</div></div>
</body>
</html>

水平居中

再item类中增加一条样式：

text-align: center;

则只能水平居中。

在这里插入图片描述

水平、垂直居中

使用Flex进行水平垂直居中，在item类中增加样式：

display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;

在这里插入图片描述

所以要让一个div里面的内容水平、垂直居中，可以将这个div变成flex布局，再设置justify-content和align-items属性。

垂直平均分布

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {display: flex;flex-direction: column;justify-content: space-between;       }.item {width: 200px;height: 100px;background-color: antiquewhite;border: 1px solid;}</style>
</head>
<body><div class="container"><div class="item">上侧内容</div><div class="item">中间内容</div><div class="item">下侧内容</div></div>
</body>
</html>

则效果：
在这里插入图片描述

可以为container 类增加一个高度样式：

height: 500px;

则效果：

在这里插入图片描述

再在container类增加样式，使水平居中：

align-items: center;

效果图：

在这里插入图片描述

再在item类中增加样式，使各个小div中文本水平垂直居中：

display: flex;
justify-content: center;
align-items: center;

则效果：
在这里插入图片描述

【CSS入门学习】Flex布局设置div水平、垂直分布与居中

水平平均分布 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>…...

编程日记 2025/1/28 1:49:22

9. 神经网络（一.神经元模型）

首先，先看一个简化的生物神经元结构： 生物神经元有多种类型，内部也有复杂的结构，但是可以把单个神经元简化为3部分组成： 树突：一个神经元往往有多个树突，用于接收传入的信息。轴突：…...

编程日记 2025/1/28 1:43:52

R 语言 | future 包，非阻塞的执行耗时脚本

目的：有一段代码，后面暂时用不到，但是又很耗时，占了当前R session，难道只能等半个小时，等到它结束才能画图？ 可以使用R多线程，在支线进程中执行耗时任务，同时不阻塞当前…...

编程日记 2025/1/28 1:41:31

UE学习日志#12 Niagara特效大致了解（水文，主要是花时间读了读文档和文章）

1 核心组件（官方文档阅读） 一些介绍主要来自官方文档Niagara概述 1.1 Systems 官方文档中的描述： Niagara系统是一种容器，可以放入你要构建该效果的所有内容。在这个系统中，你可以搭建不同的构建块来实现总体效果。…...

编程日记 2025/1/28 1:40:24

【数据结构】_链表经典算法OJ：合并两个有序数组

目录 1. 题目描述及链接 2. 解题思路 3. 程序 3.1 第一版 3.2 第二版 1. 题目描述及链接题目链接：21. 合并两个有序链表 - 力扣（LeetCode） 题目描述： 将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给…...

编程日记 2025/1/28 1:36:52

Mongodb副本集群为什么选择3个节点不选择4个节点

一、容错能力的定义在副本集中，容错能力是指系统能够容忍多少个节点故障而仍然能够保持服务可用性的能力。这通常与选举机制中的多数投票原则密切相关。二、三节点副本集的容错能力在三节点的副本集中，通常有一个主节点和两个从节点。当主节点故障…...

编程日记 2025/1/28 1:35:50

基于 WEB 开发的手机销售管理系统设计与实现内容

标题:基于 WEB 开发的手机销售管理系统设计与实现内容:1.摘要摘要：随着智能手机的普及和电子商务的快速发展，手机销售行业面临着越来越多的挑战和机遇。为了提高销售效率和管理水平，本文设计并实现了一个基于 WEB 的手机销售管理系统。该系…...

编程日记 2025/1/28 1:34:46

LeetCode - Google 大模型校招10题第1天 Attention 汇总 (3题)

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/145368666 GroupQueryAttention(分组查询注意力机制) 和 KVCache(键值缓存) 是大语言模型中的常见架构，GroupQueryAttention 是注意力…...

编程日记 2025/1/28 1:33:35

Vue3 provide/inject用法总结

1. 基本概念 provide/inject 是 Vue3 中实现跨层级组件通信的方案，类似于 React 的 Context。它允许父组件向其所有子孙组件注入依赖，无论层级有多深。 1.1 基本语法 // 提供方（父组件） const value ref(hello) provide(key, …...

编程日记 2025/1/28 1:30:20

Linux——网络基础（1）

文章目录目录文章目录前言一、文件传输协议应用层传输层网络层数据链路层数据接收与解封装主机与网卡数据传输过程示意二、IP和MAC地址定义与性质地址格式分配方式作用范围可见性与可获取性生活例子定义用途特点联系四、TCP和UDP协…...

编程日记 2025/1/28 1:29:01

【记录】日常｜从零散记录到博客之星Top300的成长之路

文章目录 shandianchengzi 2024 年度盘点概述写作风格简介2024年的创作内容总结 shandianchengzi 2024 年度盘点概述 2024年及2025年至今我创作了786即84篇文章，加上这篇就是85篇。很荣幸这次居然能够入选博客之星Top300，这个排名在我之前的所有年份…...

编程日记 2025/1/28 1:27:48

【二分查找】力扣373. 查找和最小的 K 对数字

给定两个以非递减顺序排列的整数数组 nums1 和 nums2 , 以及一个整数 k 。定义一对值 (u,v)，其中第一个元素来自 nums1，第二个元素来自 nums2 。请找到和最小的 k 个数对 (u1,v1), (u2,v2) … (uk,vk) 。示例 1: 输入: nums1 [1,7,11], nums2 …...

编程日记 2025/1/28 1:26:36

池化层Pooling Layer

1. 定义池化是对特征图进行的一种压缩操作，通过在一个小的局部区域内进行汇总统计，用一个值来代表这个区域的特征信息，常用于卷积神经网络（CNN）中。 2. 作用提取代表性信息的同时降低特征维度，具有平移…...

编程日记 2025/1/28 1:25:27

力扣算法题——11.盛最多水的容器

目录 💕1.题目 💕2.解析思路本题思路总览借助双指针探索规律从规律到代码实现的转化双指针的具体实现代码整体流程 💕3.代码实现 💕4.完结二十七步也能走完逆流河吗 💕1.题目 💕2.解析思路…...

编程日记 2025/1/28 1:18:52

自由学习记录（32）

文件里找到切换颜色空间 fgui中的颜色空间是一种总体使用前的设定颜色空间，和半透明混合产生的效果有差异，这种问题一般可以产生联系动效就是在fgui里可以编辑好，然后在unity中也准备了对应的调用手段，可以详细的使用每一个具…...

编程日记 2025/1/28 1:15:08

VScode+Latex (Recipe terminated with fatal error: spawn xelatex ENOENT)

使用VSCode编辑出现Recipe terminated with fatal error: spawn xelatex ENOENT问题咋办？ 很好解决，大概率的原因是因为latex没有添加到系统环境变量中，所有设置的编译工具没有办法找到才出现的这种情况。解决方法： winR 然后输…...

编程日记 2025/1/28 1:10:25

「蓝桥杯题解」蜗牛（Java）

题目链接这道题我感觉状态定义不太好想，需要一定的经验 import java.util.*; /*** 蜗牛* 状态定义：* dp[i][0]:到达(x[i],0)最小时间* dp[i][1]:到达 xi 上方的传送门最小时间*/public class Main {static Scanner in new Scanner(System.in);static f…...

编程日记 2025/1/28 1:06:58

PHP EOF (Heredoc) 详解

PHP EOF (Heredoc) 详解 PHP 中的 EOF（End Of File）是一种非常有用的语法特性，允许开发者创建多行字符串。它特别适合于创建格式化文本，如配置文件、HTML 模板等。本文将详细讲解 PHP EOF 的用法、优势以及注意事项。什么是 EOF？ EOF 是一种特殊的字符串定义方式，它允…...

编程日记 2025/1/28 1:05:34

pyautogui操控Acrobat DC pro万能PDF转Word，不丢任何PDF格式样式

为了将PDF转换脚本改为多进程异步处理，我们需要确保每个进程独立操作不同的Acrobat窗口。以下是实现步骤： 实现代码 import os import pyautogui import time import subprocess import pygetwindow as gw from multiprocessing import Pooldef conver…...

编程日记 2025/1/28 1:03:11

Day32：字符串的复制

在 Python 中，字符串的复制是指创建一个新的字符串，它的内容与原字符串相同。字符串是不可变的对象，这意味着你不能直接修改字符串的内容，但是可以通过复制来创建新的字符串进行操作。字符串的复制在一些情况下非常有用&#xff0…...

编程日记 2025/1/28 1:01:59

ES6从入门到精通：前言

ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。核心知识点概览变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/9/19 7:26:39

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

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

编程新知 2025/9/3 23:20:22

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...

编程新知 2025/9/3 20:40:45

Go 并发编程基础：通道（Channel）的使用

在 Go 中，Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式，用于在多个 Goroutine 之间传递数据，从而实现高效的并发编程。本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。一、Channel…...

编程新知 2025/8/28 22:40:10

三分算法与DeepSeek辅助证明是单峰函数

前置单峰函数有唯一的最大值，最大值左侧的数值严格单调递增，最大值右侧的数值严格单调递减。单谷函数有唯一的最小值，最小值左侧的数值严格单调递减，最小值右侧的数值严格单调递增。三分的本质三分和二分一样都是通过不断缩…...

编程新知 2025/9/6 19:16:38

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读在构建数据库中间件的过程中，可观测性和性能分析是保障系统稳定性与可维护性的核心能力。特别是在复杂分布式场景中，必须做到： 🔍 追踪每一条 SQL 的生命周期（从入口到数据库执行）&#…...

编程新知 2025/8/8 6:07:28

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集，单周期执行；低功耗、CIP 独立外设；用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel（原始…...

编程新知 2025/6/10 21:24:01

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里，Bessie 有一个烤箱，可以在 t C t_C tC 的时间内生产一块饼干或在 t M t_M tM 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC,tM≤109)。由于空间…...

编程新知 2025/7/7 14:36:50

[特殊字符] 手撸 Redis 互斥锁那些坑

📖 手撸 Redis 互斥锁那些坑最近搞业务遇到高并发下同一个 key 的互斥操作，想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁，也顺便跟 Redisson 的 RLock 机制对比了下，记录一波，别踩我踩过…...

编程新知 2025/7/17 20:22:50

水平平均分布

一左一右

水平居中

水平、垂直居中

垂直平均分布

相关文章：