html - 将链接对齐到 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

更新 将 text-algin: center 添加到父级以使 anchor 居中并设置 border: solid 1px black; 到您的 anchor :

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>