Стиль «bottom: 0» также выравнивается слева

Question

Я установил bottom:0 в div, чтобы выровнять его внизу. Но, даже если мой текст text-center, он выравнивается влево. Я хотел бы знать, почему?

.box { 
 
    width: 100%; 
 
} 
 
.box:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 
.content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    padding: 7%; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-4"> 
 
    <a href="#" class="thumbnail"> 
 
    <div class="box"> 
 
     <div class="content"> 
 
     <div> 
 
      <img src="http://placehold.it/350x150" alt="Title" class="img-responsive center-block"> 
 
     </div> 
 
     <div class="caption" style="position:absolute;bottom:0;"> 
 
      <p class="text-center">Title</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

Answer 1

Родитель DIV должен ширина устанавливается на 100% от ширины страницы, то ребенок р элемент будет выровняйтесь по центру страницы.

В вашем текущем фрагменте нет ширины набора элементов div, поэтому он принимает ширину содержимого своего дочернего элемента.

По-прежнему он будет немного удален от центра из-за заполнения, применяемого с использованием содержимого класса.

Вы должны применять это дополнение только для контейнера div изображения.

.box { 
 
    width: 100%; 
 
} 
 
.box:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 
.content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
} 
 
.padding7 { 
 
    padding: 7%; 
 
} 
 
.caption { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100% 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-4"> 
 
    <a href="#" class="thumbnail"> 
 
    <div class="box"> 
 
     <div class="content"> 
 
     <div class="padding7"> 
 
      <img src="http://placehold.it/350x150" alt="Title" class="img-responsive center-block"> 
 
     </div> 
 
     <div class="caption"> 
 
      <p class="text-center">Title</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

Answer 2

для абсолютно позиционируется элемента, text-center не будет работать на элемент, как absolute элементов взятых из потока.

Вы можете центрировать его с помощью transform так:

transform: translateX(-50%); 
left: 50%; 

.box { 
 
    width: 100%; 
 
} 
 
.box:before { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 
.content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    padding: 7%; 
 
} 
 
.caption { 
 
    position: absolute; 
 
    bottom: 0; 
 
    transform: translateX(-50%); 
 
    left: 50%; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-4"> 
 
    <a href="#" class="thumbnail"> 
 
    <div class="box"> 
 
     <div class="content"> 
 
     <div> 
 
      <img src="http://placehold.it/350x150" alt="Title" class="img-responsive center-block"> 
 
     </div> 
 
     <div class="caption"> 
 
      <p class="text-center">Title</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>