为什么这个css不在这个表单上的提交按钮的中心？

Question

我想使用CSS来集中这个提交按钮，并且已经在其他许多在线帖子中对此进行了研究，但还没有找到解决方案，这对于那些应该如此简单的事情来说似乎很奇怪。

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>

我已经尝试去除得到加载其他三个CSS文件，这并没有任何区别：提交按钮拒不中心，并赞同沿着复选框的右边缘，在它上面的列表中。任何帮助非常感谢！

Answer 1

只是取消左财产上输入

#buttonstyle{ 
     left: auto; 
} 

哪些u这里给

input{ 
    width:20px; 

    position:relative; 
    left: 150px; 

    vertical-align:middle; 
} 

或者你可以简单地写这样的

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

     position:relative; 
     left: 150px; 

     vertical-align:middle; 
} 

这将是更优雅为NOT包括你的按钮风格的输入风格:)

并提示你，使用web开发工具在未来，看看是什么的情况下，99％，你可以通过观察你具体的元素:)

希望它可以帮助你得到了什么风格的解决您的问题发生在那里，大多， 欢呼声

Answer 2

您的left属性input是导致错位的原因。

更改此：

input{ 
    width:20px; 

    position:relative; 
    left: 150px; 

    vertical-align:middle; 
} 

要这样：

#yourdiv input{ 
    width:20px; 

    position:relative; 
    left: 150px; 

    vertical-align:middle; 
} 

从而使left: 150px;属性将只适用于#yourdiv下的div元素input。

---

链接的jsfiddle：https://jsfiddle.net/AndrewL32/e0d8my79/101/

Answer 3

很简单，它的所有因为position:relative ...

更新您的按钮是：

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