将链接与div底部对齐并居中
将链接与div底部对齐并居中
提问于 2014-11-29 09:55:21
我正在尝试使链接位于div的底部中心，并使其居中。
到目前为止，我已经想出了这个：http://jsfiddle.net/r494Lx0r/2/
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
border: solid 1px black;
}现在我怎么让它居中呢？我已经尝试将text-align:center;和margin:0 auto;添加到容器中，但它们都不起作用。
有人知道怎么做吗？
回答 4
Stack Overflow用户
发布于 2014-11-29 09:58:40
更新将text-algin: center添加到父级以使锚点居中，并将border: solid 1px black;设置为您的锚点：
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
right: 0;
left: 0;
text-align: center;
}
a{border: solid 1px black;}<div class="container">
<div class="text">
<a href="#">Google.com</a>
</div>
</div>
添加Width: 100%和text-align: center
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
text-align: center;
width:100%;
border: solid 1px black;
}<div class="container">
<div class="text">
<a href="#">Google.com</a>
</div>
</div>
或者left: 0;、right: 0;和text-align: center;
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
border: solid 1px black;
}<div class="container">
<div class="text">
<a href="#">Google.com</a>
</div>
</div>
or you can combine `margin-left: 50%;` and `transform: translate(-50%)`
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red
}
div.container div.text {
position: absolute;
bottom: 0px;
border: solid 1px black;
margin-left: 50%;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
transform: translate(-50%)
}<div class="container">
<div class="text">
<a href="#">Google.com</a>
</div>
</div>
Stack Overflow用户
发布于 2014-11-29 10:01:08
display:block;
margin:auto;使元素居中。因此，您可以将代码编辑为：
div.container div.text {
bottom: 0px;
border: solid 1px black;
display:block;
margin:auto;
}Stack Overflow用户
发布于 2014-11-29 10:53:34
.text{ width: 100%; text-align: auto; }然后，文本换行div将与其容器一样宽，因此文本对齐将按预期工作。文本对齐在当前代码中不起作用的原因是因为"text“div的宽度与链接一样宽，因此将其内容居中不起任何作用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27198088
复制相关文章
相似问题
腾讯云开发者
