將鏈接與div的底部對齊並居中

Question

我正在嘗試使鏈接貼在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; 到容器中，但這些都不做。

有誰知道如何做到這一點？

Answer 1

UPDATE添加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> 

Answer 2

display:block;
margin:auto;

使元素居中。 因此，您可以編輯代碼以使其成為：

div.container div.text {
bottom: 0px;
border: solid 1px black;
display:block;
margin:auto;
}

Answer 3

.text{ width: 100%; text-align: auto; }

這樣，文本換行div將與其容器一樣寬，因此文本對齊將按預期工作。 text-align在當前代碼上不適合您的原因是因為“ text” div僅與鏈接一樣寬，因此居中對齊其內容無濟於事。