在 CSS 中设置 Div 左右对齐的方法有：1. text-align: center；2. justify-content: center；3. align-items: center；4. grid-template-columns: center。
如何在 CSS 中设置 Div 左右对齐
为了在 CSS 中设置 Div 左右对齐，可以使用以下属性：
1. text-align 属性
text-align 属性可以设置元素中文本的对齐方式。将其设置为 “center” 即可将 Div 中的内容左右居中对齐。
立即学习“前端免费学习笔记（深入）”；
div { text-align: center;}
2. justify-content 属性
justify-content 属性可以设置 flexbox 容器中子元素的对齐方式。将其设置为 “center” 即可将 Div 中的内容左右居中对齐。
/* 设置 Div 为 flexbox 容器 */div { display: flex;}/* 设置子元素左右居中对齐 */div > * { justify-content: center;}
3. align-items 属性
align-items 属性可以设置 flexbox 容器中子元素在交叉轴上的对齐方式。将其设置为 “center” 即可将 Div 中的内容上下居中对齐。
/* 设置 Div 为 flexbox 容器 */div { display: flex; flex-direction: column;}/* 设置子元素上下居中对齐 */div > * { align-items: center;}
4. grid-template-columns 属性
grid-template-columns 属性可以设置网格容器中列的对齐方式。将其设置为 “center” 即可将 Div 中的内容左右居中对齐。
/* 设置 Div 为网格容器 */div { display: grid; grid-template-columns: 1fr auto 1fr; /* 左右对齐中间内容 */}
以上就是css怎么设置div左右对齐的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629267.html
微信扫一扫 
支付宝扫一扫 
