Я пытаюсь центрировать динамически генерируемые элементы div (содержащие другие элементы div и динамическое содержимое), и выровнять их по горизонтали с количеством строк до 3, в настоящее время они находятся на одной линии, но не центрированы в родительском элементе div (т.е.. осталось место справа).Я использовал много методов на других должностях, но безрезультатно.Любая помощь будет фантастической!:)
HTML: (PHP сгенерирует любое их количество)
<div id="div$j" class="divs">
<div class="image_ratio">
<img src="photos/Asset 1-100.jpg" onerror="this.src='Social_Icons/Rectangle 157@2x.png'">
</div>
<h3><?php echo $name; ?></h3>
<form type="text" name="form$j" id="form$j" action="AJAX.php" method="post">
<div class="aligner">
<button type="button" class="button_div")">X</button>
<button type="button" class="button_div">Y</button>
<button type="button" class="button_div">Z</button>
</div><br>
<input type="hidden"/>
<input type="hidden"/>
</form>
</div>
, и все эти div'ы объединены в:
<div class="BAJAX">.....</div>
CSS:
.BAJAX {
grid-area: pieces;
border: solid;
}
.image_ratio {
position: relative;
width: 25vmin;
height: 35vmin;
}
.image_ratio img {
margin: 0 auto;
width: 100%;
height: 100%;
object-fit: cover;
}
.divs {
width: 25vmin;
z-index: 98;
display: inline-block;
padding: 2.5%;
float: left;
margin: 0 auto;
border: solid;
}