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

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

news 2026/2/8 20:51:10

水平平均分布

在这里插入图片描述

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

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

UDP(Echoserver)

网络命令 Ping 命令检测网络是否连通使用方法: ping -c 次数网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态常用选项： n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...

编程新知 2026/2/5 1:30:05

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成，核心是利用 HTTP 协议的 Range 请求头指定下载范围： 实现原理 Range 请求头：向服务器请求文件的特定字节范围（如 Range: bytes1024-） 本地文件记录：保存已…...

编程新知 2025/12/12 0:56:22

c#开发AI模型对话

AI模型前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别直接训练提示词嵌入向量的核心区别您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享文件木马：https://w…...

编程新知 2026/1/25 10:13:29

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看一个默认的页面，gobuster扫一下目录可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到这…...

编程新知 2026/1/29 5:24:50

水平平均分布

一左一右

水平居中

水平、垂直居中

垂直平均分布

相关文章：