如何通过CSS实现同一行不同类文本的缩进与居中对齐？

问题根源 #

text-align 不生效是因为 <a> 标签默认是行内元素，这个属性对行内元素本身不起作用，得作用在块级父元素上，或者把链接转成块级/行内块元素。另外用空格调排版本身就不规范，必须用CSS布局来控制。

实现方案 #

给三个链接套一个父容器，通过父容器控制整体居中，同时把链接转为块级元素，这样就能分别设置对齐和缩进了：

HTML 结构

<div class="recipe-links">
  <a href="#" class="bs">Bruschetta</a>
  <a href="#" class="im">Italian Meatballs</a>
  <a href="#" class="sr">Seafood Risotto</a>
</div>

CSS 代码

/* 父容器：控制整体水平居中，给链接提供块级上下文 */
.recipe-links {
  width: 400px; /* 可根据需求调整宽度，用max-width:100%可适配移动端 */
  margin: 0 auto;
}

/* 把链接转为块级元素，让text-align生效 */
.recipe-links a {
  display: block;
  margin: 8px 0; /* 给链接加上下间距，避免拥挤 */
  color: #2c3e50; /* 保留你原来的颜色样式 */
}

/* 第一个链接：左对齐+文本缩进 */
.bs {
  text-align: left;
  text-indent: 2em; /* 缩进2个字符宽度，可按需调整 */
}

/* 中间链接：居中对齐 */
.im {
  text-align: center;
}

/* 最后一个链接：右对齐+文本缩进 */
.sr {
  text-align: right;
  text-indent: -2em; /* 右对齐用负缩进，实现整体右移后的缩进效果 */
}

补充说明 #

如果想要三个链接在同一行展示，把 display: block; 改成 display: inline-block;，同时给父容器加 text-align: center; 实现行内整体居中，缩进效果可以用 padding-left/padding-right 代替 text-indent 来调整。

内容的提问来源于stack exchange，提问作者MatT