【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,即子元素从主轴的起始位置排列。
相关推荐
汪子熙2 分钟前
CSS 中 td:last-child a 选择器详解
前端·javascript
q567315239 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple16 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua23 分钟前
Vue3常用指令
前端·javascript·vue.js
欧阳天风23 分钟前
录音实时上传
前端·javascript
江号软件分享27 分钟前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长36 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
江号软件分享1 小时前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM1 小时前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士2 小时前
flex 布局完整功能介绍和示例演示
前端