CODEWITHSUNDEEP
htmlcss
rixter
rixter

Reputation: 1301

Why does this css not center the submit button on this form?

I want to center this submit button, using CSS, and have researched this in many other online posts, but have not yet found a solution, which seems odd for something that should be so simple.

td.class > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
  height: 20px;
}
#buttonstyle {
  border: 2px solid #777777;
  background: #019966;
  color: black;
  font: bold 18px'Trebuchet MS';
  padding: 4px;
  cursor: pointer;
  width: 150px;
  border-radius: 12px;
  display: inline-block;
  margin: 0px auto;
}
.buttonHolder {
  text-align: center;
}
.heading {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #006633;
}
input {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
}
input[type=text] {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
}
input[type=date] {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
}
ul {
  list-style: none;
  text-align: left;
}
input {
  width: 20px;
  position: relative;
  left: 150px;
  vertical-align: middle;
}
label {
  width: 200px;
  position: relative;
  left: -20px;
  display: inline-block;
  vertical-align: middle;
}
<form name="InstructorForm" action="../instructorDB_protected/instructorDB_controller.php" method="post" enctype="multipart/form-data">
  <div id='content'>
    <center>
      <span class="heading">Colorado Mountain Club - Boulder Group Instructor Database<br>Instructor Administrator Export Form</span>
      </p>
      <p>
        Select which schools to export to a file to download.
        <br>The file will contain a list of instructor names, emails and phone numbers:
        <p>
          <div id="yourdiv" style="display: inline-block;">
            <ul>
              <li>
                <input type="checkbox" name="avi_instructor">
                <label>Avalanche:</label>
              </li>
              <li>
                <input type="checkbox" name="hiking_instructor">
                <label>Hiking:</label>
              </li>
              <li>
                <input type="checkbox" name="ice_instructor">
                <label>Ice:</label>
              </li>
              <li>
                <input type="checkbox" name="rock_instructor_trad">
                <label>Rock, Trad:</label>
              </li>
              <li>
                <input type="checkbox" name="rock_instructor_sport">
                <label>Rock, Sport:</label>
              </li>
              <li>
                <input type="checkbox" name="ski_instructor">
                <label>Ski:</label>
              </li>
              <li>
                <input type="checkbox" name="snow_instructor">
                <label>Snow:</label>
              </li>
            </ul>
          </div>
          <br>
          <div class="buttonHolder">
            <input id=buttonstyle type="submit" name="submitAdminExport" value="Export">
          </div>
          <br>
          <a href="../instructorDB_protected/instructorDB_top.php" target="_self">Return to top</a>
    </center>
  </div>
</form>

I have experimented with removing three other CSS files that get loaded, which did not make any difference: the submit button refuses to center, and aligns itself along the right margin of the checkboxes, in the list above it. Any help much appreciated!

Upvotes: 1

Views: 55

Answers (3)

Sufyan Jabr
Sufyan Jabr

Reputation: 809

Very simply, its all because of the position:relative...

Update your button to be:

<input id="buttonstyle" type="submit" name="submitAdminExport" value="Export" style="position: static;">

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16311

Your left property on input is the cause of the misalignment.

Change this:

input{
    width:20px;

    position:relative;
    left: 150px; 

    vertical-align:middle; 
}

To this:

#yourdiv input{
    width:20px;

    position:relative;
    left: 150px; 

    vertical-align:middle; 
}

So that the left: 150px; property will only apply to input elements under the #yourdiv div.

Link to jsFiddle: https://jsfiddle.net/AndrewL32/e0d8my79/101/

Upvotes: 0

Szymon
Szymon

Reputation: 1290

just cancel left property on input 

#buttonstyle{
      left: auto; 
}

Which u gave here 

input{
     width:20px;

     position:relative;
     left: 150px; 

     vertical-align:middle; 
}

or you can just simply write like that 

input:not(#buttonstyle){
      width:20px;

      position:relative;
      left: 150px; 

      vertical-align:middle; 
}

which would be more elegant to NOT include your button styles on input styles :)

And HINT for you, use web developers tools in future and see what happen there, mostly in 99% of cases you can solve your problems by watch what styles you got on specific elements :)

hope it helps you, cheers

Upvotes: 1

Related Questions