【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 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js