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

你给了什么

input{
     width:20px;

     position:relative;
     left: 150px; 

     vertical-align:middle; 
}

或者你可以简单地写一下

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

      position:relative;
      left: 150px; 

      vertical-align:middle; 
}

在输入样式中不包含按钮样式会更优雅：）

并且HINT for you，将来使用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;

因此input属性仅适用于#yourdiv div下的serializer.is_valid(raise_exception=True)元素。

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

Answer 3

非常简单，这完全是因为position:relative ......

将您的按钮更新为：

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

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

3 个答案: