Html div 中心和底部的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22162560/
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
Button at the center and bottom of div
提问by nuT707
How to make a button be at the bottom of div and at the center of it at the same time?
如何使按钮同时位于div的底部和中心？
.Center {
width: 200px;
height: 200px;
background: #0088cc;
margin: auto;
padding: 2%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.btn-bot {
position: absolute;
bottom: 0px;
}<div class=Center align='center'>
<button class='btn-bot'>Bottom button</button>
</div>回答by AC Patrice
Give the parent element…
给父元素...
display: table; text-align: center;
…and its child element…
…及其子元素…
display: table-cell; vertical-align: bottom;
This way you do not need to know the width of the child element in case it changes, thus requiring no negative margins or workarounds.
这样你就不需要知道子元素的宽度以防它发生变化，因此不需要负边距或解决方法。
回答by 3dgoo
You can use display: table-celland vertical-align: bottomto achieve this, although you need a container div set to display: table.
您可以使用display: table-cell和vertical-align: bottom来实现这一点，尽管您需要将容器 div 设置为display: table。
HTML
HTML
<div class="boxContainer">
<div class="box">
<button>Bottom button</button>
</div>
</div>
CSS
CSS
.boxContainer {
display: table;
}
.box {
width: 200px;
height: 200px;
background: #0088cc;
padding: 2%;
display: table-cell;
text-align: center;
vertical-align: bottom;
}
回答by ced-b
One way of doing this would be to give it an absolute width and then a margin half of that:
这样做的一种方法是给它一个绝对宽度，然后给它一半的边距：
width: 250px;
margin-left: -125px;
Another way would be to give the divthe following line-height and remove all styles from the button:
另一种方法是给出div以下行高并从 中删除所有样式button：
line-height: 398px;
回答by Chankey Pathak
For example write like this if you have position absolute:
例如，如果您有绝对位置，请这样写：
.btn-bot{
position:absolute;
margin-left:-50px;
left:50%;
width:100px;
bottom:0px;
}
Note: give margin-left half of the width of the button.
注意：给margin-left 按钮宽度的一半。
回答by Marcatectura
回答by mortalis
I used table-rowto combine text and button in one container:
我曾经table-row将文本和按钮组合在一个容器中：
#out{
display:table;
position:absolute;
}
#out div#textContainer{
display:table-row;
}
#out div#text{
display:table-cell;
vertical-align:top;
}
#out div#buttonContainer{
display:table-row;
text-align:center;
}
#out div#button{
display:table-cell;
vertical-align:bottom;
}
回答by user1747281
I know this has been answered a long time ago, but I couldn't use display:table on the parent container so I had to find another way around.
我知道很久以前就已经回答了这个问题，但是我无法在父容器上使用 display:table 所以我不得不找到另一种方法。
It turned out that this worked just fine:
事实证明，这工作得很好：
.container{
position:absolute;
}
.button{
position:absolute;
bottom: 5px;
left: 0%;
right: 0%;
text-align: center;
}
Edit: This works if your button is a <div>, not for an actual <button>
编辑：如果您的按钮是一个<div>，而不是实际的<button>
回答by Hunter Nelson
This is what worked for me and I think is what several people were trying to get at. Just use a full width wrapper div with the button centered inside it.
这对我有用，我认为这是几个人试图达到的目标。只需使用全宽包装器 div 并将按钮置于其中。
<div class="outer">
<div class="inner-button-container">
<a href="#">The Button</a>
</div>
</div>
.outer{
position:relative;
height:200px;
width:500px;
background-color:lightgreen;
}
.inner-button-container{
background-color:grey;
position:absolute;
bottom:0;
right:0;
left:0;
text-align:center;
}
a{
margin:auto;
background-color:white;
}
Result:
结果：
回答by Penny Liu
You can use align-items: flex-endlike so:
你可以align-items: flex-end像这样使用：
html,
body {
height: 100%;
}
.flex-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.center {
width: 200px;
height: 200px;
background: #0088cc;
display: flex;
align-items: flex-end;
}
.btn-bot {
margin: 0 auto;
display: block;
}<div class="flex-container">
<div class="center">
<button class="btn-bot">Bottom button</button>
</div>
</div>