Bel*_*ish 64 html css center alignment
我在css中将html表单提交按钮置于中心时遇到了麻烦.
现在我正在使用
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
用这个css
#btn_s{
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
而且它没有做任何事情,我知道我可能做了一些愚蠢的错误,任何人都可以帮助我吗？
谢谢
Seb*_*lli 118
http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/
我只是在它们周围包裹一个div并使它对齐中心.然后你不需要按钮上的任何CSS来居中它们.
<div class="buttonHolder">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
.buttonHolder{ text-align: center; }
Tom*_*Tom 29
输入元素默认为内联.添加display:block以获取要应用的边距.但是,这会将按钮分成两行.使用包装<div>与text-align: center其他人的建议,让他们在同一行.
Adr*_*zyk 13
我在这里看到一些答案,其中大多数是复杂的或有一些缺点(额外的div,text-align因为display:inline-block而无效).我认为这是最简单,最无问题的解决方案:
HTML:
<table>
<!-- Rows -->
<tr>
<td>E-MAIL</td>
<td><input name="email" type="email" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register!" /></td>
</tr>
</table>
CSS:
table input[type="submit"] {
display: block;
margin: 0 auto;
}
试试这个 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#btn_s{
width:100px;
}
#btn_i {
width:125px;
}
#formbox {
width:400px;
margin:auto 0;
text-align: center;
}
</style>
</head>
<body>
<form method="post" action="">
<div id="formbox">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
</form>
</body>
这有2个例子,你可以使用最符合你情况的那个.
text-align:center父容器上,或为此创建一个容器.auto左右边距将其居中放置在父容器中.请注意,auto通过左侧和右侧分配空白区域,单个块使用它们将它们置于父级空间中.