Абсолютное центральное изображение в тегах Bootstrap Div

У меня есть этот кусок кода, который реагирует, и я хочу центрировать изображения как по вертикали, так и по горизонтали. может ли кто-нибудь помочь мне с этой загадочной загадкой?Абсолютное центральное изображение в тегах Bootstrap Div

<div class="row"> 
<div class="col-xs-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img src="http://dreamatico.com/data_images/banana/banana-5.jpg" /></a></div> 
<div class="col-xs-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img src="http://dreamatico.com/data_images/banana/banana-5.jpg" /></a></div> 
<div class="col-xs-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img src="http://dreamatico.com/data_images/banana/banana-5.jpg" /></a></div>

источник

2016-01-08 Caghan

Незнайки если вы знаете, но «строка» 'div' не была закрыта. Это может повлиять на расположение вашей страницы. – TRose

фотографии этого plunker https://plnkr.co/edit/LnMVTmlDc6eNEUyOPonR?p=preview – cheralathan

мне нужен бананы, чтобы быть в середине утка и не выровнена к началу https://plnkr.co/edit/bdD3nYnvFPGYoSv9uC3T ? p = preview – Caghan

Вы можете использовать класс img-responsive center-block для изображений. Таким образом, изображения будут находиться в абсолютном центре и реагировать.

<div class="row"> 
<div class="col-md-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img class="img-responsive center-block" src="http://dreamatico.com/data_images/banana/banana-5.jpg"></a></div> 
<div class="col-md-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img class="img-responsive center-block" src="http://dreamatico.com/data_images/banana/banana-5.jpg"></a></div> 
<div class="col-md-4"><a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"><img class="img-responsive center-block" src="http://dreamatico.com/data_images/banana/banana-5.jpg"></a></div> 
</div>

Вот Demo для того же. Надеюсь это поможет.

источник

2016-01-08 03:34:57

, когда добавлено изображение с высоким утиным, бананы все еще выравниваются сверху и не в середине. http://www.bootply.com/K6yYeY8p0w# – Caghan

Кажется, я нашел решение. Адрес Demo. Добавлено в этом CSS

.div-center { 
display: flex; 
align-items: center; 
} 
.img-center { 
margin: 0 auto; 
padding: 1em; 
}

источник

2016-01-08 03:59:36 Caghan

Вы можете использовать IMG реагирующих (http://getbootstrap.com/css/#images-responsive) и центральный блок (http://getbootstrap.com/css/#helper-classes-center) классы. Это классы полезности, предоставляемые твитер-бутстрапом.

Вы пересмотренная HTML может выглядеть как этот

<div class="row"> 
    <div class="col-md-4 center-block"> 
     <a href="http://dreamatico.com/data_images/banana/banana-5.jpg" target="_blank" title="Read More"> 
      <img class="img-responsive" src="http://dreamatico.com/data_images/banana/banana-5.jpg"> 
     </a> 
    </div> 
    ....... Repeat for other divs 
</div>

источник

2016-01-08 04:14:15 jerry

попробовать это

.col-xs-4 { 
     display: table-cell; 
     float: none; 
     vertical-align: middle; 
    }

источник

2016-01-08 04:38:32 WisdmLabs

Ответы на код, скорее всего, будут бесполезны для будущих посетителей и даже самого ОП. Попробуйте отредактировать свой ответ, чтобы содержать пояснения с кодом. – Magisch

Вы должны дать мин-высоту каждого DIV и установить CSS свойство, как:

div{ margin:0 auto;}

источник

2016-01-08 05:23:27

Абсолютное центральное изображение в тегах Bootstrap Div

ответ

Смежные вопросы