CSS无法将文本与：：前和：：后对齐

Question

我正在努力学习css，最近我遇到了混合混合模式，我在codepen 这里上发现了非常好的代码，但是当我尝试文本对齐: h1；只有h1对齐。

​

  div {
    position: relative;
  }
  
  h1 {
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 8vw;
    font-weight: bold;
    color: rgba(0, 0, 200, 0.7);
  }
  
  h1::before {
    position: absolute;
    z-index: 5;
    left: -5px;
    top: 0;
    content: attr(text);
    color:rgba(200,0,0,.7);
    mix-blend-mode: multiply;
  }
  
  h1::after {
    position: absolute;
    z-index: 5;
    left: 5px;
    top: 0;
    content: attr(text);
    color:rgba(0,200,0,.7);
    mix-blend-mode: multiply;
  }

<div>
  <h1 text="BLEND-MODESを使う">BLEND-MODESを使う</h1>
</div>

​

Answer 1

您可以创建h1内联块并添加position:relative，这样伪元素相对于它(而不是div元素)被放置，然后对整个h1 (包括伪元素)进行居中。

我还使用transform而不是左/右简化了代码。

​

div {
  text-align: center;
}

h1 {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 8vw;
  font-weight: bold;
  color: rgba(0, 0, 200, 0.7);
  display: inline-block;
  position: relative;
}
h1::before,
h1::after {
  content: attr(text);
  position: absolute;
  z-index: 1;
  left:0;
  mix-blend-mode: multiply;
}


h1::before {
  transform:translateX(-5px);
  color: rgba(200, 0, 0, .7);
}

h1::after {
  transform:translateX(5px);
  color: rgba(0, 200, 0, .7);
}

<div>
  <h1 text="BLEND-MODESを使う">BLEND-MODESを使う</h1>
</div>

​

Answer 2

您看到的text-align的问题与您对mix-blend-mode的使用完全无关。

css属性text-align将在元素的可用空间内对齐文本内容。

对于块元素，通常情况下，可以得到居中的文本。这里我们看到一个简单的例子，h1是一个块元素，因此它占用了整个可用的宽度，并且文本很好地居中。

我添加了一个红色背景，这样您就可以准确地看到h1元素的位置：

​

h1 {
  background-color: red;
  text-align: center;
}

<h1>
Test
</h1>

​

但是，当您更改元素的position属性时，可以将元素从盒子模型的流中取出。这意味着它不考虑其他元素的位置计算，也不在自己的位置计算中使用其他元素，包括宽度和高度。正因为如此，它失去了计算“使用全宽度”的意思的能力。因此，块级元素开始表现为内联元素，它的宽度是包含内容所必需的最小值。

请注意我们的红色背景：

​

h1 {
  background-color: red;
  text-align: center;
  position: absolute;
}

<h1>
Test
</h1>

​

文本是“居中”的，但由于元素与文本具有相同的宽度，因此效果将丢失。

要查看比文本居中的文本更大的框，要么必须( a)不使用绝对定位，以便返回框模型流；或者( b)使用css width属性为元素提供显式宽度。