Мне нужно, чтобы только первая и последняя карты в этом наборе карт были центрированы по горизонтали. Высота каждой карты установлена равной 70%, поэтому ширина является чувствительной ... если бы ширина была фиксированным процентом, я мог бы просто рассчитать, какой должен быть край слева, чтобы отцентрировать первую карту и вычислить, какой должен быть край справа. центрировать последнюю карту, но ширина является чувствительной и не фиксированной ... какой-нибудь обходной путь для этого?
В настоящее время я только что сделал предположение и определил, какой будет центр, используя margin-left и margin- верно, но они явно не корректны во всех окнах просмотра. Мне нужно, чтобы они были идеальными.
Может быть, это требует JS? Хотя я действительно ищу решение css.
ДЛЯ УТОЧНЕНИЯ Я не собираюсь центрировать все карты по горизонтали. Я ищу только первую и последнюю карту по центру. Карты между ними просто расположены в линию относительно места, где начинается первая карта. Немного сложно объяснить, поэтому здесь (https://jsfiddle.net/g5avo673/) приведен JSFiddle, демонстрирующий именно то, что я имею в виду. Это легко сделать здесь, потому что ширина определена, поэтому я могу рассчитать, какие поля должны быть для центрирования первой и последней карты, проблема с моим кодом заключается в том, что ширина не определена, только высота, поэтому я не могу подсчитать, какие должны быть поля, когда ширина является отзывчивой.
JSFiddle:
https://jsfiddle.net/yn93phse/
код:
<div id="horizontalproductcontainer">
<div id="scrolling-wrapper">
<div class="productcardfirst">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcard">
<img src="images/.JPG" alt="." class="productimage1" />
</div>
<div class="productcardlast">
<img src="images/.jpeg" alt="." class="productimage1" />
</div>
</div>
</div>
#horizontalproductcontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
#scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
margin: 0 auto;
height: 100%;
width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.productcardfirst {
display: inline-block;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
margin-left: 30%;
padding-right: 3%;
}
.productcard {
display: inline-block;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
padding-right: 3%;
}
.productcardlast {
display: inline-block;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
margin-right: 30%;
}
.productcard img,
.productcardfirst img,
.productcardlast img {
height: 100%;
}