【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,即子元素从主轴的起始位置排列。
相关推荐
独立开阀者_FwtCoder7 分钟前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
张晓~183399481211 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑1 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue772 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃2 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc