Html 如何使用纯CSS堆叠文本？

我想用一个文本作为另一个文本的背景。基本上，通过使用两个具有适当位置和z索引设置的div元素，这是非常容易的，如中所述

我的问题是我想对齐两个文本，尽管它们的大小不同。背景文本较大，前景文本应与背景文本垂直对齐，使两个文本的垂直中心位于同一位置

我可以通过手动调整像素的位置来实现这一点，但是我必须对我想要单独使用的每种字体大小都这样做。此外，我无法确定这是否在每个浏览器中都以相同的方式工作

---

有更好的替代方法吗？

当然，您可以使用替代方法-占位符文本

键入新文本时，文本将自动删除，然后默认文本将被删除

//文本框

<input  type="text" defaultvalue="Name" value="Name" name="add_name" id="add_name">

---

尝试上述选项。

垂直对齐可以这样做：

.parent {
position:relative;
zoom:1;/*has layout for ie*/
}
.verticalcentered1, .verticalcentered2 {
position:absolute;
top:50%;
height:20px;
margin-top:-10px;/*half the height*/
}
.verticalcentered1 {z-index:1;}    
.verticalcentered2 {z-index:2;}

---

如果垂直居中的元素是您的文本，则它们将垂直居中于父对象中，并且相互重叠，如果这是您要查找的内容。

我认为您的外观如下：-

HTML

我是通过使用：

<div style="position: relative; font-size: 100pt; height: 100px;">
  <div style="font-size: 2em; color: #f00; position: absolute; top: 0; left: -0.37em; bottom: 0; right: 0; z-index: -1; line-height: 0.4em;">
    B
  </div>
  Sample text
</div>

---

使用“左”和“行高”属性，我可以对齐两个文本，并且当我增加容器的字体大小时，它们的相对对齐方式保持不变。

您可以发布所需结果的图像吗……请参见示例：背景文本应更大，前景文本应垂直居中于背景文本顶部。理想情况下，我希望使用两个div元素和适当的css类来实现这一点。有什么想法吗？很抱歉，我的问题不是关于输入元素：-/example坏了

<div id="container">
        <div id="background">Sample Some Text </div>
        B
</div>

#container {
    position: relative;
    font-size:70px;
    color:#00c7ff;
    z-index:-1; 
}

#background {
    left: 20px;
    position: absolute;
    right: 0;
    top: 25%;
    z-index: 10;
    color:black;
    font-size:20px;
}

<div style="position: relative; font-size: 100pt; height: 100px;">
  <div style="font-size: 2em; color: #f00; position: absolute; top: 0; left: -0.37em; bottom: 0; right: 0; z-index: -1; line-height: 0.4em;">
    B
  </div>
  Sample text
</div>