-3

我想将一个按钮向上，另一个向下。我如何编辑我的 CSS 来实现这一点。这里是

css-

#ContactForm .button {
margin-left:8px;
margin-left:9px;
float:right;
margin-right:2px;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px;
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}

html-

<div>
  <a href="#" class="button" onclick="document.getElementById('ContactForm').submit()">send</a>
  <a href="#" class="button" onclick="document.getElementById('ContactForm').reset()">clear</a>
</div>
4

2 回答 2

2

这是你想要的 jsfiddle.... http://jsfiddle.net/xgdVM/

您可以将容器的 text-align 设置为 center 并将按钮的 display 属性设置为 block..

CSS：

#form{text-align:center;}
a{display:block;}​

HTML

 <div id="form">
     <a href="#" class="button" onclick="document.getElementById('ContactForm').submit()">send</a>
     <a href="#" class="button" onclick="document.getElementById('ContactForm').reset()">clear</a>
 </div>​

或者，如果您的按钮有一个 set witdth ie width:70px;，那么您可以只为它们提供 css 属性margin:0 auto;，并且它们将通过向左右应用相等的边距来居中

http://jsfiddle.net/xgdVM/2/

于 2012-12-12T08:59:26.877 回答
0

如果您的意思是水平居中：

#ContactForm .button {
    margin: 0 auto; /* centers, provided there's a width set */
    display: block;
    font-size:20px;
    font-weight:700;
    color:#fff;
    line-height:35px;
    width:90px; /* width set */
    text-align:center;
    background:url(../images/button_form.gif) top repeat-x #308da2;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;behavior:url(js/PIE.htc);
    position:relative;
    text-decoration:none
}
于 2012-12-12T09:17:57.833 回答