Question

我设置了一个提交按钮，并希望将其置于中心位置。这是CSS：

.outer {
    text-align: center;
}

/* BUTTONS */

.buttons button{
cursor: pointer;
cursor: hand;
border: 0;
height: 28px;
float: left;
text-indent: 4px;
text-decoration:none;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
background: url(../images/button.png);
}

.buttons span{ /* Right-hand corner */
cursor: pointer;
cursor: hand;
display: block;
width: 5px;
height: 28px;
float: left;
background: url(../images/button.png) top right;
}

这是html：

<div class="outer">
   <div class="buttons">
      <button type="submit">SUBMIT</button><span></span>
   </div>
</div>

我从http://www.scottking.com.au/blog/2009/03/custom-styled-css-html-input-buttons/#.Uc2IYdjcAix

复制了此代码

到目前为止，无法将此按钮居中对齐。

Answer 1

给。outer一个自动边距和宽度：http://jsfiddle.net/derekstory/Ctab4/

CSS

.outer {
    text-align: center;
    margin: auto;
    width: 200px;
}

Answer 2

您可以使用display:inline-block;我认为兼容性可以追溯到IE 7。

.outer .buttons {
    display:inline-block;
}

http://jsfiddle.net/AVtjQ/

编辑：compatibility will go back to IE6如果您将div更改为自然内联元素（如span）。

Answer 3

将此添加到.buttons

.outer .buttons { margin: 0 auto; }

Answer 4

扔一个

 div.buttons {
    text-align: center;
 }

在那里。

Answer 5

保证金左：50％ margin-right：auto

我认为这会奏效，你可能需要调整百分比。

Answer 6

在你的CSS中用这个代替你的代码

.outer {
    text-align: center;
    margin: auto;
    width: 200px;
}

/* BUTTONS */

.buttons button{

cursor: pointer;
cursor: hand;
border: 0;
height: 28px;
float: left;
text-indent: 4px;
text-decoration:none;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
background: url(../images/button.png);
}

.buttons span{ /* Right-hand corner */
cursor: pointer;
cursor: hand;
display: block;
width: 5px;
height: 28px;
float: left;
background: url(../images/button.png) top right;
}

将提交按钮div居中

6 个答案: