Как сделать див блоки по центру:?

Question

[squirtazzer]

<div class="inner">

<img class="aligncenter" src="https://motorr-dv.ru/wp-content/uploads/2018/01/йцц.jpg" alt="" />123123123

</div>
<div class="inner">

<img class="aligncenter" src="https://motorr-dv.ru/wp-content/uploads/2017/02/777.jpg" alt="" />123123123

</div>

{

  display:flex;
  justify-content:center;
}
.inner
{
 
 display:inline-block;
  flex-direction: column;
  text-align:center;
  margin:5rem;
  width:28%;
}

Не могу заставить див блоки быть по центру

Comments

[Сергей Герасимов]

Вам необходимо научиться читать свой код. В первом блоке стилей вы задаёте display: flex какому селектору? Никакому... Возьмите ваши блоки в обертку и уже ей установите ваш display: flex.
Во втором блоке вы создаёте инлайн блоки и присваиваете им флексовые стили... Они не применятся, либо удалите, либо поменяйте на flex-inline

Answer 1

[Константин Теплоухов]

Примерно так

.linner{
width : 100px;
position: absolute;
Left : 50%;
margin-left: -50px;
}

А вообще вот : https://habrahabr.ru/post/238449/
Стоило лишь загуглить ;)

Comments

[Сергей Герасимов]

На самом деле, гуглить надо ещё уметь...
Во-первых чему вы задаёте стили? У автора вопроса даже нет такого селектора.
Во-вторых зачем вырывать блок из контекста? Похиционирование абсолютно чего задаёте? Как быть, если на странице есть ещё контент? Позиционируется всё намного проще и легче.

[Егор Лавренов]

Лучше transform: tranaslateX(-50%) использовать, вместо марджина

[squirtazzer]

Сергей Герасимов, https://motorr-dv.ru
на телефоне эти два блока оч плохо смотрятся.как сделать чтобы они были на телефоне вертикальными?

[Олеся]

squirtazzer, Прописать в css для блока media для телефона. Вместо, например, width: 50% поставить 100%

[Константин Теплоухов]

Сергей Герасимов, Я лишь дал наводку . Сделать left 50% а потом margin - половина ширины блока . В чём проблема ?

[Сергей Герасимов]

Константин Теплоухов, проблема в контексте. Вы слышали такое понятие, как "вырвать из контекста"? Для каких целей используется абсолютное похиционирование? Что будет высотой такого блока? Как содержимое будет располагаться после такого блока?

squirtazzer, можно задать flex-wrap: wrap и минимальную ширину блока, тогда если не влезет блок, то он перенесется на новую строку. Или используйте media-query и меняйте ширину в зависимости от размера страницы. А ещё почитайте про box-sizing: border-box, тогда не придётся изобретать велосипеды по расчёту конечной ширины блока

[squirtazzer]

Константин Теплоухов, так?

@media(max-width: 992px){ .services { display: block; } .service-item { width: 100%; margin-bottom: 20px; } }

Answer 2

[tempick]

Задайте блокам display:inline-block и оберните их оба в div и задайте свойство ему text-align:center