为什么 Flexbox 对齐对占位符伪元素不起作用？答案

【问题标题】：Why doesn't Flexbox alignment work on placeholder pseudo-element?为什么 Flexbox 对齐对占位符伪元素不起作用？
【发布时间】：2021-10-23 02:44:09
【问题描述】：

我正在尝试使用 Flexbox 对齐 ::placeholder 伪元素。

我知道传统的对齐方式，例如 text-align 用于内联对齐，line-height hack 用于块对齐，或者只是绝对定位。我对这些不感兴趣。

Flexbox 可以很好地对齐 ::before 和 ::after 伪元素（试试看！）。但不知何故，它不适用于对齐 <textarea> 和 <input> 元素的 ::placeholder 伪元素。

为什么？

textarea {
  height: 10rem;
  display: flex;
  /* should put it center center */
  align-items: center;
  justify-content: center;
}

input {
  height: 10rem;
  display: flex;
  /* should put it top center */
  align-items: flex-start;
  justify-content: center;
}

<textarea placeholder="Some text"></textarea>

<input placeholder="Some text" />

【问题讨论】：

在 css 中使用 textarea::placeholder 并尝试

标签： css flexbox alignment textarea

【解决方案1】：

Flexbox 可以很好地对齐 ::before 和 ::after 伪元素（试试看！）。但不知何故，它不适用于对齐 <textarea> 和 <input> 元素的 ::placeholder 伪元素。

在 flex 容器中，::before 和 ::after 伪元素被视为容器的子元素。因此，它们是弹性项目并且可以接受弹性属性。

来自 MDN 文档的注释 this section：

流入 ::after 和 ::before 伪元素现在是 flex 项目。

在弹性容器中，placeholder 属性或 ::placeholder 伪元素都不能是弹性项目。因此，它们会忽略 flex 属性。

【讨论】：

感谢您尝试解释这一点。不过，MDN 并不能完全满足我。我想知道这是否是 CSS 规范规定的？我找不到任何东西...
如果有什么规定？ ::after 和 ::before?好吧，这是规范作者之间的对话。 bugzilla.mozilla.org/show_bug.cgi?id=867454
或者为什么占位符被排除在flex布局之外？在那种情况下，据我所知，几乎所有属性都是。无需为其中一个创建规则。
我明白了。我假设::placeholder 是像::before 和::after 这样的伪元素。我没有想到通过属性设置它的内容以某种方式需要限制它可以被 CSS 设置样式的方式。在我看来，这更像是 Flexbox 之前时代的残余，自从 Flexbox 创建以来，就没有人看过了。我可以理解这一点，因为::placeholder 可能在优先级列表中的位置较低。虽然我认为在没有像过去那样的黑客攻击的情况下轻松对齐它仍然值得......
我认为应用于 HTML 属性和 CSS 伪元素的 CSS3 技术（如 flex 和 grid）领域大多是未开发和未开发的。目前，规范开发人员似乎已经确定了 ::before 和 ::after 的行为，但其他的不多。

【解决方案2】：

你可以通过text-align水平集中它，通过line-height垂直集中它。

    textarea {
      height: 10rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    textarea::placeholder {
      text-align: center;
      line-height: 10rem;
    }

    &lt;textarea placeholder="I'm not centered"&gt;&lt;/textarea&gt;

【讨论】：

谢谢。我澄清了这个问题，说明我对其他解决方案不感兴趣，但为什么 Flexbox 不起作用。
@philmcole 水平你可以通过 text-align 使文本居中。
@philmcole text-align 适用于实际文本以及水平居中。
@philmcole justify-content 如果有一个父元素是 flex 则有效，如果有剩余空间，它会证明子项。显然它不适用于文本框的占位符。
@philmcole 这些是伪元素。而占位符是一个属性。

【解决方案3】：

认为 flexbox 仅在父级具有特定宽度时才有效

你可以这样做

textarea{
        display: flex;
        width: 400px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

或者如果您只想将占位符作为中心使用绝对位置，如下所示：

    textarea{
        position: relative;
        width: 500px;
        height: 200px;
    }
    textarea::placeholder {
        position: absolute;
        top: 50%;
        right: 35%;
    }

【讨论】：

谢谢。我澄清了这个问题，说明我对其他解决方案不感兴趣，但为什么 Flexbox 不起作用。