在 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 中的内容左右居中对齐。
立即学习“前端免费学习笔记（深入）”；
<code class="css">div {
text-align: center;
}</code>2. justify-content 属性
justify-content 属性可以设置 flexbox 容器中子元素的对齐方式。将其设置为 "center" 即可将 Div 中的内容左右居中对齐。
<code class="css">/* 设置 Div 为 flexbox 容器 */
div {
display: flex;
}
/* 设置子元素左右居中对齐 */
div > * {
justify-content: center;
}</code>3. align-items 属性
align-items 属性可以设置 flexbox 容器中子元素在交叉轴上的对齐方式。将其设置为 "center" 即可将 Div 中的内容上下居中对齐。
<code class="css">/* 设置 Div 为 flexbox 容器 */
div {
display: flex;
flex-direction: column;
}
/* 设置子元素上下居中对齐 */
div > * {
align-items: center;
}</code>4. grid-template-columns 属性
grid-template-columns 属性可以设置网格容器中列的对齐方式。将其设置为 "center" 即可将 Div 中的内容左右居中对齐。
<code class="css">/* 设置 Div 为网格容器 */
div {
display: grid;
grid-template-columns: 1fr auto 1fr; /* 左右对齐中间内容 */
}</code>以上就是css怎么设置div左右对齐的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
777
收藏
