Question

我正在尝试但是我的按钮位于中央，但没有工作就是左侧

我正在尝试添加到HTML代码但不能正常工作

这是html代码：

<body>
<form name="form1" method="post" action="">
<div class="buttons">
    <button type="submit" class="positive" name="save">
        <img src="apply2.png" alt=""/> 
        Save
    </button>
    <a href="" class="regular">
        <img src="textfield_key.png" alt=""/> 
        Change Password
    </a>

    <a href="" class="regular">
        <img src="downloads.png" alt=""/> 
        Downloads
    </a>

    <a href="#" class="negative">
        <img src="cross.png" alt=""/>
        Cancel
    </a>
</div>
</form>
</body>

这是CSS代码：

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:12px;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

button.regular, .buttons a.regular{
    color:#336699;
}
.buttons a.regular:hover, button.regular:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a.regular:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

如何在中心垂直对齐提交按钮？

Answer 1

从标记float和button中删除a，然后将text-align添加到课程buttons

试试这个演示：

.buttons a,

.buttons button {

  display: inline-block;

  margin: 0 7px 0 0;

  background-color: #f5f5f5;

  border: 1px solid #dedede;

  border-top: 1px solid #eee;

  border-left: 1px solid #eee;

  font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;

  font-size: 12px;

  line-height: 130%;

  text-decoration: none;

  font-weight: bold;

  color: #565656;

  cursor: pointer;

  padding: 5px 10px 6px 7px;

  /* Links */

}

.buttons button {

  width: auto;

  overflow: visible;

  padding: 4px 10px 3px 7px;

  /* IE6 */

}

.buttons button[type] {

  padding: 5px 10px 5px 7px;

  /* Firefox */

  line-height: 17px;

  /* Safari */

}

*:first-child+html button[type] {

  padding: 4px 10px 3px 7px;

  /* IE7 */

}

.buttons button img,

.buttons a img {

  margin: 0 3px -3px 0 !important;

  padding: 0;

  border: none;

  width: 16px;

  height: 16px;

}

button:hover,

.buttons a:hover {

  background-color: #dff4ff;

  border: 1px solid #c2e1ef;

  color: #336699;

}

.buttons a:active {

  background-color: #6299c5;

  border: 1px solid #6299c5;

  color: #fff;

}

button.positive,

.buttons a.positive {

  color: #529214;

}

.buttons a.positive:hover,

button.positive:hover {

  background-color: #E6EFC2;

  border: 1px solid #C6D880;

  color: #529214;

}

.buttons a.positive:active {

  background-color: #529214;

  border: 1px solid #529214;

  color: #fff;

}

.buttons a.negative,

button.negative {

  color: #d12f19;

}

.buttons a.negative:hover,

button.negative:hover {

  background: #fbe3e4;

  border: 1px solid #fbc2c4;

  color: #d12f19;

}

.buttons a.negative:active {

  background-color: #d12f19;

  border: 1px solid #d12f19;

  color: #fff;

}

button.regular,

.buttons a.regular {

  color: #336699;

}

.buttons a.regular:hover,

button.regular:hover {

  background-color: #dff4ff;

  border: 1px solid #c2e1ef;

  color: #336699;

}

.buttons a.regular:active {

  background-color: #6299c5;

  border: 1px solid #6299c5;

  color: #fff;

}

.buttons {

  text-align: center;/*added this line*/

}

<body>
  <form name="form1" method="post" action="">
    <div class="buttons">
      <button type="submit" class="positive" name="save">
        <img src="apply2.png" alt="" />Save
      </button>
      <a href="" class="regular">
        <img src="textfield_key.png" alt="" />Change Password
      </a>

      <a href="" class="regular">
        <img src="downloads.png" alt="" />Downloads
      </a>

      <a href="#" class="negative">
        <img src="cross.png" alt="" />Cancel
      </a>
    </div>
  </form>
</body>

Answer 2

只需删除float:left并在下面的display:inline-block类中添加.buttons a, .buttons button，然后在下面添加css即可解决此问题。

<强> CSS

.buttons{
    text-align:center;
}

Fiddle Sample

Answer 3

要将所有按钮居中，请将其添加到您的CSS中。

.buttons{
width:80%; /* change width as required */
margin:0 auto
}

中心提交按钮

3 个答案: