To center a section element

1

Hello everybody!

I’d like to center my section element where my movie’s posters are

Capture1.PNG
Capture1.PNG1892×1012 285 KB

I can solve this issue with padding-left but I’m sure there is a “cleaner” way to fix this.

Here’s the css for my div element where the selection element belongs :

.movie {
	margin-bottom: 50px;
}

Here’s the section’s css :


section {
	position: relative;
	width: 100%;
	margin-top: 25px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	overflow-x: visible;
	transition: 250ms all;
}

section img {
	width: 300px;
	transition: 250ms all;
	margin-right: 16px;
	margin-bottom: 15px;
}

Is there a better way to center my section? (sorry my english guys!!)

2

Hello and welcome to the forum :partying_face:!

Well, you will have a problem since your section is using all available width, thus cannot be centered. However, you could center the children.

Since you’re already using flex, why not center the children with justify-content: center? justify-content aligns items through the x axis (horizontally), whereas align-items does it through the y axis (vertically).

2 Likes
3

It’s working pretty great!! Thank you for your advice!

1 Like