CODEWITHSUNDEEP
htmlcss
bboooooyintheuk
bboooooyintheuk

Reputation: 143

Centrally aligning textbox on the page HTML

EDIT: I've added the related javascript. Basically, on checkbox click a textbox appears, but I want the textbox to appear in the center of the page.

I'm trying to centrally align a textbox on the page however I can't seem to make it work. Here's my current code, which is only aligning the text within the textbox 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>

JS:

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

Upvotes: 1

Views: 84

Answers (5)

Qui-Gon Jinn
Qui-Gon Jinn

Reputation: 4408

You can run snippet to see how code works. Now text in the center of the screen.

.selecttier h1{
  text-align: center;
 }
 .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>

Upvotes: 0

Muhammad Naveed
Muhammad Naveed

Reputation: 92

Can Add this to fix it.

#basictiertextbox{
display: block;
margin: 0px auto;
}
<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" />
    <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>

#basictiertextbox{
    display: block;
    margin: 0px auto;
}

Upvotes: 0

abdallasaleh
abdallasaleh

Reputation: 3

ok the easiest way to do this is using flexbox, try this code and it should work "i edited your html structure"

.container{
    width:100%;
}
.selecttier > h1{
  text-align:center;
}
.selecttier > div{
  width:100%;
  position:relative;
  display:flex;
  justify-content:center;
}
.selecttier > div > div{
  display:flex;
  flex-direction:column;
}
.selecttier > div > div > div{
  margin-bottom:5px;
}
.selecttier > div > div > div input{
  margin-right:10px;
}
<div class="container">
  <div class="selecttier">
    <h1>4. Select Tier</h1>
    <div>
      <div>
        <div>
          <input type="checkbox" class="<1000clicks" name="basictier" value="0.20" id="basictier" onclick="TierFunction()" >0 - 1,000 clicks
        </div>
        <div>
          <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
        </div>
        <div>
          <input type="checkbox" class=">5000clicks" name="premiumtier" value="0.40">5,000+ clicks   
        </div>
      </div>   
    </div>

  </div>
</div>

Upvotes: 0

Moob
Moob

Reputation: 16204

Its not clear if you're trying to center .selecttier on the page or if you're trying to center-justify its contents.

To center a block use flexbox:

.wrapper {
  display: flex;
  justify-content:center;
}
<div class="wrapper">
  <div class="selecttier">
    <h1>4. Select Tier</h1>
    <input type="checkbox" class="0-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>
</div>

To center justify the childen use text-align:

.selecttier {
text-align:center;
}
  <div class="selecttier">
    <h1>4. Select Tier</h1>
    <input type="checkbox" class="0-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>

Upvotes: 2

Hans Felix Ramos
Hans Felix Ramos

Reputation: 4434

Just put text-align: center; in .selecttier

.selecttier {
    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>

Upvotes: 0

Related Questions