为什么 align-self 在 CSS 中不能作为 text-align 工作？答案

【问题标题】：Why align-self do not work as text-align in CSS?为什么 align-self 在 CSS 中不能作为 text-align 工作？
【发布时间】：2021-12-25 01:22:17
【问题描述】：

出于解释的目的，我将使用摘录和简化。

我正在寻找几个月前设计的网页中的错误，我在徽标部分发现了以下问题：

<div>
 <a id="logo" href="index.html" title="Página Principal" class="logo center">
   <img src="img/mainlogo.png" alt="Corporate-logo" title="Página Principal">
 </a>
</div>

考虑父容器有： display: flex;里面还有另一个元素（子元素）。

在样式表 CSS 中

.logo {
  flex:1;
  align-self: center;
}

.center {
text-align: center;
}

一旦我删除了中心类，徽标就会向左移动（我想是默认值）。我不明白 align-self 不要将徽标放在中心。

我遗漏了什么或不理解什么？，我不想使用中心类来居中徽标。

【问题讨论】：

除非示例标记中的 div 具有 display: flex（或网格），否则 align-self 将不起作用。当您说“父容器”时，您是指示例中 div 上方的内容吗？

标签： html css text-align

【解决方案1】：

你需要设置的是display属性。

display: flex; 而不是flex: 1;

（flex: 1是将flex-grow设置为1的简写）

然后可以使用justify-content 和align-items 属性定义对齐方式。

【讨论】：

【解决方案2】：

如果您将display: flex 添加到父级，align-self 将照常工作。 sn-p 显示了一种更常用的方法。

align-self 允许为单个弹性项目覆盖默认对齐方式（或由 align-items 指定的对齐方式）。

SOURCE

.parent {
  display: flex;
  justify-content: center;
}

<div class="parent">
  <a id="logo" href="index.html" title="Página Principal" class="logo center">
    <img src="img/mainlogo.png" alt="Corporate-logo" title="Página Principal">
  </a>
</div>

【讨论】：