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添加到父级以使锚定居中并将border: solid 1px black;设置为您的锚：

＆＃13;

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;}

＆＃13;

<div class="container">
	<div class="text">
		<a href="#">Google.com</a>
	</div>

</div>

＆＃13;

添加Width: 100%和text-align: center

＆＃13;

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;
}

＆＃13;

<div class="container">
	<div class="text">
		<a href="#">Google.com</a>
	</div>

</div>

＆＃13;

或left: 0;，right: 0;和text-align: center;

＆＃13;

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;
}

＆＃13;

<div class="container">
	<div class="text">
		<a href="#">Google.com</a>
	</div>

</div>

＆＃13;

or you can combine `margin-left: 50%;` and `transform: translate(-50%)`

＆＃13;

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%)
}

＆＃13;

<div class="container">
	<div class="text">
		<a href="#">Google.com</a>
	</div>

</div>

＆＃13;

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-align对你当前代码不起作用的原因是＆＃34; text＆＃34; div只与链接一样宽，因此它的内容居中无效。

将链接对齐div的底部并居中

3 个答案: