Как выровнять картинки в мобильной версии сайта?

Question

[Константин]

Создал одинаковые дивы с картинками, при помощи inline-block, чтобы были в одну строчку.
Как в мобильной версии их выровнять по центру?

Скрин с пк



Скрин с моб



Исходник:

<div class="title"><p><strong>НАШИ КЛЮЧЕВЫЕ ПАРТНЕРЫ</strong></p>
</div>
<div class="one">
	<img src="......./wp-content/uploads/2018/08/logo1-1.png">
</div>
<div class="one">
	<img src="........./wp-content/uploads/2018/08/logo2.png">
</div>
<div class="one">
	<img src="......./wp-content/uploads/2018/08/logo3-1.png">
</div>
<div class="one">
	<img src="......../wp-content/uploads/2018/08/logo8.png">
</div>
<div class="one">
	<img src="http://....../wp-content/uploads/2018/08/logo5.png">
</div>

.one {display: inline-block; margin-left: 10px; text-align: center; }

Answer 1

[Ankhena]

Поменять inline-block на block для мобилок.

Comments

[Константин]

Сработало!!! А как стиль отдельно для мобильной версии прописать? Чтобв в пк инлайн блок был, а в моб просто блок?

[Andrew]

gradk, mediaqueries css гуглите.

[ziss]

gradk,

@media (max-width: 768px) { 
   .one{
     dispay: block;
   }
}

Answer 2

[Alexander]

Код бы посмотреть... В моб версии это слайдер? или куда делись остальные логотипы? А так вообще inline-block`и подчиняются правилам выравнивания строчных элементов, т.е. text-align: center; будет работать. Точно сказать что нужно делать в конкретном случае не видя код нельзя.

Comments

[Константин]

Spblancer (ру) , это не слайдер, спасибо за отзывчивость

[Alexander]

gradk, пропишите text-align:center; для div с классами textwidget custom-html-widget и все логотипы будут по центру.

И еще у вас там ошибка в слове display