两个span标签，一个居中，一个靠右

您可以使用以下HTML和CSS代码来实现这个要求：

<div class="container">
  <span class="centered">居中</span>
  <span class="right-aligned">靠右</span>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.centered {
  text-align: center;
}

.right-aligned {
  text-align: right;
}

这里我们使用了一个包裹元素 `.container`，并且将它的 `display` 属性设置为 `flex`，并且使用 `justify-content: space-between` 来让两个span元素在容器内均匀分布，其中一个span元素使用 `text-align: center` 让它居中，另一个span元素使用 `text-align: right` 让它靠右。

相关问题

一个盒子里的两个span标签分别居中，靠右

您可以使用以下的HTML和CSS代码，来实现您的需求：

<div class="container">
  <span class="centered">居中</span>
  <span class="right-aligned">靠右</span>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-aligned {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

这里使用了 `display: flex` 属性，使得 `.container` 元素成为一个弹性容器。然后，使用 `justify-content` 属性来控制弹性子元素之间的水平间距，从而让两个 `span` 标签分别居中和靠右。在 `.centered` 和 `.right-aligned` 元素上使用了 `display: flex` 属性，使得它们也成为弹性容器，然后使用 `justify-content` 和 `align-items` 属性来分别实现居中和靠右的效果。

html靠右对齐标签

### HTML 中实现文本或元素靠右对齐的方法

#### 使用 `span` 标签配合 CSS 实现右对齐
对于行内元素如 `<span>`，可以通过包裹在一个具有特定样式的父容器中来达到右对齐效果。具体做法是在外部添加一个块级元素（比如 `<div>`），并给这个外层应用 `text-align:right;` 的样式[^1]。

<div style="text-align:right;">
    <span>这是一个向右对齐的Span</span>
</div>

#### 利用表格单元格中的 `align` 属性
在较旧版本的HTML文档里可以直接利用 `<td>` 或者 `<th>` 内部设置 `align=right` 来使其中的内容自动调整到右侧位置[^4]：

<table border="1">
  <tr>
    <td align="right">这是表格内的右对齐文本。</td>
  </tr>
</table>

不过需要注意的是，在现代Web开发实践中推荐优先考虑CSS解决方案而非过时的HTML属性。

#### 设置为块状显示并通过 margin 自动填充
另一种常见的方式是将原本属于inline类型的标签转换成block或者inline-block形式展示，再借助于左右两侧均为auto值的margin参数完成水平方向上的居中或是偏移操作[^3]:

.span-right {
  display: block;
  text-align: right;
}

<span class="span-right">此 Span 将会独占一行并向右对齐。</span>

如果只需要保持在同一行但是相对其最近的一个拥有明确宽度设定的祖先节点而言，则应该选用 inline-block 类型替代纯 block 方式处理。