Html 如何在动态大小的div的中心放置一个按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15496818/
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
How to place a button in the center of div of dynamic size
提问by s.mujahid8
I have this code:
我有这个代码：
<div class="outer">
<ul class="list">
<li class="inner">
<div class="line">information1</div>
<div class="line">hyperlink1</div>
</li>
<li>
<div class="line">information2</div>
<div class="line">hyperlink2</div>
</li>
<li>
<div class="line">information3</div>
<div class="line">hyperlink3</div>
</li>
<li>
<div class="line">information4</div>
<div class="line">hyperlink4</div>
</li>
</ul>
<input type="submit" id="send" value="send" class="button"/>
</div>
and the css:
和CSS：
.outer
{
display: table;
border: 1px solid;
padding: 5px;
}
.list
{
list-style: none;
padding: 5px;
}
.inner
{
display: table-row;
padding: 5px;
}
.line
{
display: table-cell;
border: 1px solid;
border-radius: 5px;
}
.button
{
top:50%;
left:50%;
}
the output is: this
输出是：这个
Now i want to place the button in the center of the 'outer' div no matter what is the width.
现在，无论宽度如何，我都想将按钮放在“外部”div 的中心。
example: i want the button to be in center even for: this. without having to change the css each time the div size changes. Even if the 'outer' div is dynamic, the button should be in the center.
例如：我希望按钮位于中心，即使是：this。每次 div 大小更改时都不必更改 css。即使“外部”div 是动态的，按钮也应该位于中心。
thank you.
谢谢你。
回答by Kyuuji
This achieves what you're looking for in a simple, succinct, way:
这以一种简单、简洁的方式实现了您正在寻找的内容：
.button {
display:block;
margin: 0 auto;
}
回答by Raffael
You need to give the button a specific width and then you can use automatic margins
你需要给按钮一个特定的宽度，然后你可以使用自动边距
.button {
display: block;
margin: 0 auto;
}
回答by bashleigh
There's more than one way to do this. I prefer using percentages like so:
有不止一种方法可以做到这一点。我更喜欢像这样使用百分比：
input[type="submit"]{
min-width:20%;
max-width:20%;
margin:0% 39% 0% 40%; //margin-right = 39% to stop errors
}
Other people prefer a margin:autoapproach but personally I've never found this to work. Other methods include using floatsbut I don't agree with this property as it mis aligns other elements in some browsers.
其他人更喜欢一种margin:auto方法，但就我个人而言，我从未发现这种方法有效。其他方法包括 usingfloats但我不同意此属性，因为它在某些浏览器中未对齐其他元素。
Using top and left will cause errors as you've not specified a position type other than default (static).
使用 top 和 left 会导致错误，因为您没有指定默认（静态）以外的位置类型。
