Выровняйте ссылку на нижнюю часть 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 { 
 
\t position: relative; 
 
\t height: 110px; 
 
\t width: 120px; 
 
\t border: dashed 1px red; 
 
} 
 

 
div.container div.text { 
 
\t position: absolute; 
 
\t bottom: 0px; 
 
\t right: 0; 
 
    left: 0; 
 
    text-align: center; 
 
} 
 

 
a{border: solid 1px black;}

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

 
</div>

Добавить Width: 100% и text-align: center

div.container { 
 
\t position: relative; 
 
\t height: 110px; 
 
\t width: 120px; 
 
\t border: dashed 1px red; 
 
} 
 

 
div.container div.text { 
 
\t position: absolute; 
 
\t bottom: 0px; 
 
    text-align: center; 
 
    width:100%; 
 
\t border: solid 1px black; 
 
}

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

 
</div>

или left: 0;, right: 0; и text-align: center;

div.container { 
 
\t position: relative; 
 
\t height: 110px; 
 
\t width: 120px; 
 
\t border: dashed 1px red; 
 
} 
 

 
div.container div.text { 
 
\t position: absolute; 
 
\t bottom: 0px; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
\t border: solid 1px black; 
 
}

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

 
</div>

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

div.container { 
 
\t position: relative; 
 
\t height: 110px; 
 
\t width: 120px; 
 
\t border: dashed 1px red 
 
} 
 

 
div.container div.text { 
 
\t position: absolute; 
 
\t bottom: 0px; 
 
\t border: solid 1px black; 
 
    margin-left: 50%; 
 
    -webkit-transform: translate(-50%); 
 
    -moz-transform: translate(-50%); 
 
    transform: translate(-50%) 
 
}

<div class="container"> 
 
\t <div class="text"> 
 
\t \t <a href="#">Google.com</a> 
 
\t </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 не работает для вас в вашем текущем коде, потому что «текст» div только такой же широкий, как ссылка, поэтому центрирование его содержимого ничего не делает.