如何将不同长度的ASCII文本在同一行对齐显示？

这两种需求都完全可以通过HTML+CSS实现，下面是具体实现方式：

效果一：统一长度后同行展示 #

给每个文本容器设置固定宽度，配合布局属性让它们在同一行排列，内部文本可按需设置对齐方式。

示例代码：

<div style="display: flex; gap: 10px;">
  <div style="width: 150px; border: 1px solid #ccc; padding: 4px; text-align: left;">短文本</div>
  <div style="width: 150px; border: 1px solid #ccc; padding: 4px; text-align: left;">中等长度的ASCII文本</div>
  <div style="width: 150px; border: 1px solid #ccc; padding: 4px; text-align: left;">很长很长的一段ASCII测试文本</div>
</div>

说明：width属性统一容器宽度，flex实现同行排列，gap控制容器间距，边框仅用于直观展示范围，实际可移除。

效果二：保留原长度但居中对齐 #

让容器自适应内容宽度，通过父容器的布局属性实现整体居中，也可单独设置文本在容器内的对齐方式。

Flex布局实现 #

<div style="display: flex; justify-content: center; gap: 10px;">
  <div style="border: 1px solid #ccc; padding: 4px;">短文本</div>
  <div style="border: 1px solid #ccc; padding: 4px;">中等长度的ASCII文本</div>
  <div style="border: 1px solid #ccc; padding: 4px;">很长很长的一段ASCII测试文本</div>
</div>

若需要文本自身在容器内居中，给子容器添加text-align: center即可。

Inline-block实现 #

<div style="text-align: center;">
  <div style="display: inline-block; border: 1px solid #ccc; padding: 4px; margin: 0 5px;">短文本</div>
  <div style="display: inline-block; border: 1px solid #ccc; padding: 4px; margin: 0 5px;">中等长度的ASCII文本</div>
  <div style="display: inline-block; border: 1px solid #ccc; padding: 4px; margin: 0 5px;">很长很长的一段ASCII测试文本</div>
</div>

PowerShell的Write-Host对文本排版支持有限，无法实现这类精细对齐需求，HTML+CSS是更合适的解决方案。

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