1

Столкнулся с проблемой выравнивания по центру.
Пытался выровнить с помощью пустых div вначале и в конце линий с элементами.
Так же пытался сделать их flex(inline-flex) и с выровнить с помощью justify-content.
Пытался с помощью margin и почему-то он не работает что только не делал.
В кратце перепробовал все варианты с ним(может нет)

Кому не сложно объясните подробно что делаю не так и где ошибки, и если сможете найти решение буду очень благодарен

мой первый пост, не судите строго пожалуйста

/*
///////////////
	 MAIN
///////////////
*/

main {
  margin-top: 100px;
  font-weight: 300;
}

.product1,
.product2,
.product3,
.product4,
.product5,
.product6,
.product7,
.product8 {
  height: 290px;
  width: 210px;
  display: inline-block;
  margin: 40px 25px;
  /*position: relative;*/
  outline: 2px solid red;
}

.product1,
.product5 {
  margin-left: 0;
}

.product4,
.product8 {
  margin-right: : 0;
}

.imgP1,
.imgP2,
.imgP3,
.imgP4,
.imgP5,
.imgP6,
.imgP7,
.imgP8 {
  height: 210px;
  width: 210px;
  outline: 2px solid yellow;
}

.productsBackImage {
  height: 210px;
  width: 210px;
}

.infoP1,
.infoP2,
.infoP3,
.infoP4,
.infoP5,
.infoP6,
.infoP7,
.infoP8 {
  height: 80px;
  width: 210px;
  outline: 2px solid black;
}


/*.firsstLine_start {
	width: 90px;
	display: inline-block;
	outline: 1px solid black;
	height: 290px;
}

.firsstLine_end {
	width: 90px;
	display: inline-block;
	outline: 1px solid black;
	height: 290px;
}

.secondLine_start {
	width: 90px;
	display: inline-block;
	outline: 1px solid black;
	height: 290px;
}

.secondLine_end {
	width: 90px;
	display: inline-block;
	outline: 1px solid black;
	height: 290px;
}*/
<main id="mainContent">
  <div class="mainProducts">
    <div class="firsstLine_start">

    </div>
    <div class="product1">
      <div class="imgP1">
        <a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
      </div>
      <div class="infoP1">
        <span><a href="#"></a></span>
      </div>
    </div>
    <div class="product2">
      <div class="imgP2">
        <a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
      </div>
      <div class="infoP2">
        <span><a href="#"></a></span>
      </div>
    </div>
    <div class="product3">
      <div class="imgP3">
        <a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
      </div>
      <div class="infoP3">
        <span><a href="#"></a></span>
      </div>
    </div>
    <div class="product4">
      <div class="imgP4">
        <a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
      </div>
      <div class="infoP4">
        <span><a href="#"></a></span>
      </div>
      <div class="firsstLine_end">

      </div>
    </div>
    <div class="secondLine_start">

    </div>
    <div class="product5">
      <div class="imgP5">
        <a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
      </div>
      <div class="infoP5">
        <span><a href="#"></a></span>
      </div>
    </div>
    <div class="product6">
      <div class="imgP6">
        <a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
      </div>
      <div class="infoP6">
        <span><a href="#"></a></span>
      </div>
    </div>
    <div class="product7">
      <div class="imgP7">
        <a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
      </div>
      <div class="infoP7">
        <span><a href="#"></a></span>
      </div>
    </div>
    <div class="product8">
      <div class="imgP8">
        <a href="#"><img src="img/products/test.png" alt="" class="productsBackImage"></a>
      </div>
      <div class="infoP8">
        <span><a href="#"></a></span>
      </div>
      <div class="secondLine_end">

      </div>
    </div>
  </div>
</main>

2
  • Можете картинкой показать какой хотите результат ? 27 окт 2019 в 22:14
  • @Андрей я не знаю как это добавить, могу сказать, нужно чтобы в одной строке скажем так находилось 4 прямоугольника и они были выровнены по центру, то есть отступы справа и слева были одинаковые. Так же и со 2 строкой
    – Mr9S
    27 окт 2019 в 22:16

2 ответа 2

0

родителю display:flex;justify-content:center;

или элементу position:relative;width:*value*;margin:0 auto;

0
.mainProducts{
    text-align: center;
}
7
  • Написал исходя что получил, последствия разрулишь легко 27 окт 2019 в 22:19
  • Спасибо большое, сейчас почему то сработало, хоть это я и использовал
    – Mr9S
    27 окт 2019 в 22:23
  • Если нужны четкие размещения Напиши 27 окт 2019 в 22:23
  • как раз это и нужно было, спасибо большое, дальше сам
    – Mr9S
    27 окт 2019 в 22:24
  • Смотри если у тебя не адавтивка то сойдёт а если она немного верстку менять нада 27 окт 2019 в 22:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.