-1

我已经设计了一个提交按钮并希望将其居中。这是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复制了这段代码

到目前为止一直无法居中对齐这个按钮。

4

6 回答 6

1

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

CSS

.outer {
    text-align: center;
    margin: auto;
    width: 200px;
}
于 2013-06-28T14:49:47.883 回答
1

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

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

http://jsfiddle.net/AVtjQ/

编辑：如果您将 div 更改为像 span 这样的自然内联元素，兼容性将回到 IE6 。

于 2013-06-28T14:52:19.573 回答
0

将此添加到 .buttons

.outer .buttons { margin: 0 auto; }
于 2013-06-28T14:48:20.590 回答
0

扔一个

 div.buttons {
    text-align: center;
 }

在那里。

于 2013-06-28T14:48:47.343 回答
0

左边距：50% 右边距：自动

我认为这会起作用，您可能需要调整百分比。

于 2013-06-28T14:50:34.857 回答
0

在你的 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;
}
于 2013-06-28T14:51:15.250 回答