UPDATE: I have included the relevant JavaScript code. Essentially, a text box appears when a checkbox is clicked, but I want the text box to be centered on the page.
I am attempting to center align a text box on the page, but I am struggling to achieve this. Here is my current code, which only centers the text inside the text box itself.
.selecttier input {
text-align: center;
}<div class="selecttier">
<h1>4. Select Tier</h1>
<input type="checkbox" class="<1000clicks" name="basictier" value="0.20" id="basictier" onclick="TierFunction()" >0 - 1,000 clicks<br>
<input id="basictiertextbox" type="text" value="0.00" data-total="0" style="display:none;" />
<input type="checkbox" class="1000-5000clicks" name="standardtier" value="0.30">1,000 - 5,000 clicks<br>
<input type="checkbox" class=">5000clicks" name="premiumtier" value="0.40">5,000+ clicks<br>
</div>JavaScript:
function TierFunction() {
// Get the checkbox
var checkBox = document.getElementById("basictier");
// Get the output text
var text = document.getElementById("basictiertextbox");
// If the checkbox is checked, display the output text
if (checkBox.checked == true) {
text.style.display = 'block';
} else {
text.style.display = 'none';
}
}