テキストボックスの中央スパン

Question

私はテキストボックスを持っており、その中にスパンを挿入したいと思います。と私はそれがすべての時間の垂直の中心ですが、私の問題は、いくつかのデバイスの中心ではない私はパーセント値でそれをテストしたが動作しません。ここで

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

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

 
    .

Answer 1

あなたを助けるかもしれない例です。

見にdiv要素の幅を変更しようと、それは常にcenterdです。

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; 
 
}

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