css多列文本居中显示如何实现_Flexbox justify-content和align-items-css教程-PHP中文网

css多列文本居中显示如何实现_Flexbox justify-content和align-items

php中文网

发布： 2025-12-06 22:07:02

原创

514人浏览过

使用Flexbox可通过justify-content和align-items实现多列文本居中：1. justify-content: center使列在主轴水平居中；2. align-items: center在交叉轴垂直居中；3. 配合text-align: center使文本自身居中，需设置容器高度与gap间距，适用于多列布局且整体对齐效果直观灵活。

css多列文本居中显示如何实现_flexbox justify-content和align-items

要实现CSS多列文本的居中显示，使用Flexbox是最简单且高效的方式。通过 justify-content 和 align-items 两个属性，可以轻松控制主轴和交叉轴上的对齐方式。

1. 水平居中：justify-content

当有多列内容并希望它们在容器中水平居中时，使用 justify-content: center 可以让所有子元素在主轴方向（默认为横轴）上居中排列。

设置父容器为 display: flex
添加 justify-content: center 实现水平居中
适用于多列文本、按钮组或卡片布局

2. 垂直居中：align-items

如果希望每列内的文本在垂直方向上居中，比如多行文本或不同高度的列保持对齐，align-items: center 能让子元素在交叉轴（默认为纵轴）上居中。

同样在父容器上设置 display: flex
加上 align-items: center 实现垂直居中
注意：这会影响所有子项的整体对齐，若需单个元素居中可考虑单独设置

3. 完整示例代码

以下是一个典型的多列文本居中布局：

.container {
  display: flex;
  justify-content: center;    /* 水平居中 */
  align-items: center;        /* 垂直居中 */
  height: 300px;              /* 设定高度以便看到垂直居中效果 */
  gap: 20px;                  /* 列间距 */
}
<p>.column {
text-align: center;         /<em> 文本自身居中 </em>/
width: 100px;
}</p>

登录后复制

HTML结构：

<div class="container">
  <div class="column"><p>第一列</p></div>
  <div class="column"><p>第二列</p></div>
  <div class="column"><p>第三列</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1359">
                            <img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6d4a5293fb574.png" alt="Sitekick">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1359">Sitekick</a>
                            <p>一个AI登陆页面自动构建器</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Sitekick">
                                <span>121</span>
                            </div>
                        </div>
                        <a href="/ai/1359" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Sitekick">
                        </a>
                    </div>
                <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></div>
</div>

登录后复制