Html 使用 CSS 居中按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9084354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering buttons using CSS
提问by thelost
I am trying to center these buttons, but most stuff online does not work. <center>does not work and text-align:centerdoes not work.
我试图将这些按钮居中，但网上的大多数东西都不起作用。<center>不起作用，text-align:center不起作用。
The buttons should show up in the exact same way, except centered in the middle. If you try this, it will not work. there must be a problem, I guess.
按钮应该以完全相同的方式显示，除了在中间居中。如果你尝试这个，它不会工作。一定有问题，我猜。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
});
</script>
<style type="text/css">
.button0 {
position:fixed;
left:88px;
top:58px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
}
.button1 {
position:fixed;
left:6px;
top:191px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
text-align: center;
margin-left:auto;
margin-right:auto;
}
.button2 {
position:fixed;
left:358px;
top:216px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
}
</style>
<body>
<center>
<div class="button0"><input type="button" style="width: 268px;height: 145px;" value="Button"/></div>
<div class="button1"><input type="button" style="width: 40px;height: 88px;" value="Button"/></div>
<div class="button2"><input type="button" style="width: 76px;height: 73px;" value="Button"/></div>
</center>
</body>
</html>
回答by ggzone
.container {
text-align: center;
}
.center-element {
width: 100px;
text-align: left;
}
or
或者
.container {
width: 200px;
}
.center-element {
width: 100px;
margin: 0px auto 0px auto;
}
or
或者
.container {
width: 200px;
}
.center-element {
width: 100px;
position: relative;
left: 50%;
margin-left: -50px;
}
回答by James Hill
You can't assign position:fixedand top& leftand expect your elements to be centered. Typically, margin: 0px autowill work well. See example below.
您不能分配position:fixed和top&left并期望您的元素居中。通常，margin: 0px auto会运作良好。请参见下面的示例。
.button0 {
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
margin: 0px auto;
}
.button1 {
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
text-align: center;
margin: 0px auto;
}
.button2 {
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
margin: 0px auto;
}
Here's a working fiddle to demonstrate.
这是一个演示的工作小提琴。
回答by Marcus Olsson
回答by mikul
Try vertically-centered text in a div. See JSFiddle Demofor example.
在 div 中尝试垂直居中的文本。例如，请参阅JSFiddle 演示。
回答by SQLMason
You want to wrap it in a relativediv. Then you can set the margins of the left and right to auto.
你想把它包装在一个relativediv 中。然后您可以将左右边距设置为auto.
Just to be clear, is this what you're looking for?
只是要清楚，这就是你要找的吗？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>website</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
<body>
<div style="position:relative; width:500px; height:200px; background:green; text-align:center">
<input type="button" style="width: 268px;height: 145px;" value="Button1"/>
<input type="button" style="width: 40px;height: 88px;" value="Button2"/>
<input type="button" style="width: 76px;height: 73px;" value="Button3"/>
</div>
</body>
</html>
