Question

在内容前垂直对齐小绝对位置::的最佳或正确方法是什么，以使其基线与父级文本对齐？

在此代码片段中，我希望“ XL”具有与“ Lorem ipsum”相同的基线。只是调整顶部：太脆弱了。

body {margin: 0 30px; position: relative}

p {background-color: lightblue}

p::before {content: "XL"; font-size: 75%; position: absolute; right: 100%; background-color: lightgray}

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor.  </p>
</body>

Answer 1

正确答案：使用line-height并使用em。

当您要使用文本基线作为元素的transform-origin时，您遇到了一个经典示例。我建议使用this reading来了解局限性。

此外，在您当前的解决方案中，您依靠最接近的相对定位祖先的宽度来移动:before。您真的不需要那个。您可以放心地将其保留在当前位置（父级的左上角），然后将其自身宽度的100％向左移动：

document.querySelector('input[type="range"]').addEventListener('input', function(){
  document.body.style.fontSize = this.value + 'px'
})

body {
  padding: 24px 0 0 1em;
  font-size: 18px;
}

p {
  margin-top: 0;
  background-color: lightblue;
}

p::before {
  content: "XL";
  position: absolute;
  transform: translateX(-100%);
  background-color: lightgray;
  font-size: 75%;           
  line-height: 1.75em; 
}

input[type=range] {
  width: 80vw;
  left: 10vw;
  top: 0;
  position: absolute;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>

<input type="range" value="18" step=".01" min="10" max="84">

初始答案（当我认为您只是想与底部对齐时）：

您需要给父母position:relative;和孩子bottom: 0：

body {padding: 0 30px; }

p {
  background-color: lightblue; 
  position: relative
  }

p::before {
  content: "XL"; 
  font-size: 75%; 
  position: absolute; 
  right: 100%; 
  background-color: lightgray;
  bottom: 0;
}

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor.  </p>
</body>

超出范围：请勿在margin上使用<body>。请改用padding。

Answer 2

我会调整line-height

div {
  margin: 0 30px;
  position: relative
}

p {
  background-color: lightblue
}

p::before {
  content: "XL";
  font-size: 75%;
  position: absolute;
  right: 100%;
  background-color: lightgray;
  line-height:1.75;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
</div>

<div style="font-size:20px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
</div>

<div style="font-size:35px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in dictum purus. Etiam accumsan quam et turpis elementum, in tempor. </p>
</div>

垂直对齐:: before的绝对定位内容，以匹配父级的基线

2 个答案: