将间距放在居中的textarea的左侧，而不更改对齐

Question

h1标记中的标题在视口中居中。 然后，有一个textarea与标题对齐，并在视口中居中。 如何在textarea的左侧定位带有数字（例如12）的跨度而不更改textarea的居中？

enter code here       

此标题以视口

为中心                12         该文本区域应该居中并与标题对齐            

https://jsfiddle.net/fredericmarcel/85f4mouk/26/

Answer 1

您可以在绝对定位的框元素中添加内部div。然后可以将其设置为位置：相对于重置定位上下文，然后跨度可以相对于该位置定位。

.inner{
  height:100%;
  width:100%;
  position:relative;
}
.element .number {
  position:absolute; display:inline-block; 
  width:60px; height:60px; top:50%; margin-top:-30px;

  text-align:center; font-size:300%; 
  line-height:60px; vertical-align:middle;
}

<div class="box">
  <h1>This title is centered in the viewport </h1>
  <div class="element">
    <div class="inner">
       <span class="number">12</span>
        <textarea id="zonetexte">This textarea should be centered and aligned with the title</textarea>
      </div>

  </div>
</div>

fiddle