【css】水平对齐方式(justify、text-align、display: flex;)

一、justify

  1. 完整的属性名是 justify-content
  2. justify-content 用于定义位于同一行的项目在主轴(通常是水平方向)上的对齐方式。
  • center :居中
  • start : 起始位置对齐(左对齐)
  • end : 结束位置对齐(右对齐)
  • space-between : 元素之间会平均分布,第一个元素靠左,最后一个元素靠右,中间元素平分间距。
  • space-around : 元素之间会有相同的间距,并且第一个元素和最后一个元素与两侧的间距是中间元素间距的一半。

二、text-align

三、display: flex;

  1. text-align 要配套display: flex;吗 display: flex;可以不写吗
  • text-align 属性用于设置块级元素或表格单元内的文本或行内元素的水平对齐方式,通常与 display: flex 无关。因此,你可以在不使用 display: flex 的情况下使用 text-align 来对齐文本内容。

CODE:

html 复制代码
<div style="text-align: center;">
  <p>这是居中的文本。</p>
</div>
  1. display: flex;和justify配套吗 justify可以不写吗
  • display: flex;justify-content 确实通常是配套使用的,但并不是强制必须要一起使用。
  • display: flex; 作用:
    display: flex; 用于将元素设为弹性容器,使其子元素成为弹性项目,可以在主轴上灵活排列。
  • 不写 justify-content 的效果:
    虽然 justify-content 通常与 display: flex; 一起使用,但你可以选择不写 justify-content。如果不写,justify-content 默认会是flex-start,即子元素从主轴的起始位置排列。
相关推荐
枷锁—sha几秒前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha2 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜18 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2431 分钟前
html复习
javascript·microsoft·html
汉得数字平台36 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹43 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法