Сделать центр тегов изображения

Question

Я использую bootstrap 3, и я хочу добавить ссылку со значком поверх изображения и вертикально центрировать его.

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
<div class="col-post"> 
    <div class="post-img"> <a href="#" class="my-icon"></a> <a href="mylink"> 
    <div class="overlay"> <img src="myimage.jpg" alt="#" class="img-responsive"> </div> 
    </a> 
    </div> 
    <!--post-img--> 
    <div class="post-icons"></div> 
</div> 
</div> 

Я хочу, чтобы ссылка с классом my-icon была в центре изображения. мой значок позиционируется как абсолютный, а post-img позиционируется относительно.

Любая помощь будет высоко оценена.

Answer 1

Вот несколько кодов, которые помогли мне вертикально центрировать изображения. Обычно это намного сложнее, чем горизонтальное центрирование.

#ID { 
    Margin:0 auto; 
    Position:absolute; 
    Left:0; 
    Right:0; 
    Top:50%; 
    Transform: translate(0, -50%); 
    Display:block; 
} 

Answer 2

Я просто использовал существующий .center-block вспомогательный класс из библиотеки, а также .text-center класса центрировать содержимое каждого div. (see documentation for bootstrap 3.x)

Я не уверен, что это именно то, что вы хотите, но оно должно помочь вам приблизиться к вашим результатам.

Дайте мне знать, если это необходимо.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div class="row"> 
    <div class="col-xs-12"> 
    <h2>My approach (simplistic)</h2> 
    <a href="#" class="my-icon"> 
     <img src="http://lorempixel.com/300/300" class="center-block img-responsive img-circle" alt="Responsive image" /> 
    </a> 
    </div> 
</div> 
<hr/> 
<div class="row"> 
    <div class="col-xs-12"> 
    <h2>Your approach (w/ added elements)</h2> 
    <div class="col-post"> 
     <div class="post-img center-block text-center"> 
     <a href="#" class="my-icon">my-icon</a> 
     <a href="mylink"> 
      <div class="overlay"> 
      <img src="http://lorempixel.com/300/300?asdf" alt="#" class="img-responsive center-block"> 
      </div> 
     </a> 
     </div> 
     <!--post-img--> 
     <div class="post-icons center-block text-center">post icons</div> 
    </div> 
    </div> 
</div> 

Answer 3

Try Flexbox, это один из немногих способов, которыми я когда-либо имел успех последовательно центр пунктов Выравнивающих вертикально.

Для родительского контейнера: дисплея

дисплей Это определяет гибкий контейнер; inline или block в зависимости от заданного значения. > Он позволяет использовать контекст flex для всех его прямых детей.

CSS.container { display: flex; /* or inline-flex */ } 

Для ребенка: ALIGN-элементы

ALIGN-изделия Это определяет поведение по умолчанию для того, как сгибать детали раскладывают вдоль поперечной оси на текущей строке. Подумайте об этом как версия оправдательного содержания для поперечной оси (перпендикулярно главной оси ).

CSS.container { align-items: flex-start | flex-end | center | baseline | stretch;}