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

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

news 2026/2/9 12:55:34

水平平均分布

在这里插入图片描述

<!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

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2026/2/4 2:08:30

Unity3D中Gfx.WaitForPresent优化方案

前言在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

Opencv中的addweighted函数

一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...

编程新知 2025/12/23 11:20:24

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题安装 flash-attn 会一直卡在 build 那一步或者运行报错解决办法是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战：各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07