文本框中的中心跨度

Question

我有一个文本框，我想在其中插入span。我希望它一直处于垂直中心，但我的问题是它不是在某些设备中居中我用百分比值测试它但它不起作用。

＆＃13;

＆＃13;

clearBtn {
	position: relative;
	left: 74px;
	transition: left 0.3s;
	font-size: 20px !important;
	font-family: "B Nazanin" !important;
	top:50%
}

＆＃13;

 <span id="clearBtn1" class="clearBtn">09</span>
 <input type="tel" id="PhoneField" class="phoneBox" maxlength="9"/>

    .

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是一个可以帮助您的示例：

  

尝试更改div的宽度以查看，它始终居中。

＆＃13;

＆＃13;

div {
  position: relative;
  width:200px
}
.phoneBox{
  display:block;
  width:100%;
}
.clearBtn {
  position: absolute;
  left:calc(50% - 8px);
  font-size: 20px !important;
  font-family: "B Nazanin" !important;
}

＆＃13;

<div>
  <span id="clearBtn1" class="clearBtn">09</span>
  <input type="tel" id="PhoneField" class="phoneBox" maxlength="9" />
</div>

＆＃13;

＆＃13;

＆＃13;