Aligning entire row/span as center HTML/CSS

[Sharif]

 

Basically trying to center a 3x3 grid into the center of the page but can't get it to align on the center, how does one go about that? 

 

I tried using display: block in a css class "top-images" that's on all the spans but ends up turning all the photos into a div layout

[C2dan88]

Apply auto margins

.content-section div {
    width: 80%;
    margin-left: auto; # auto margins to center content within parent element
    margin-right: auto;
}

 

Or the modern way of displaying content within a grid is flex box

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

[duncannah]

The simplest way to do this is to wrap the grid in a container (or using your .content-section element if you want to centre the text in it too) and setting `text-align: center` on the container.

This works because images are part of the phrasing content by default, so they're influenced by the text alignment

[Sharif]

5 hours ago, C2dan88 said:

Apply auto margins

.content-section div {
    width: 80%;
    margin-left: auto; # auto margins to center content within parent element
    margin-right: auto;
}

 

Or the modern way of displaying content within a grid is flex box

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

 

58 minutes ago, duncannah said:

The simplest way to do this is to wrap the grid in a container (or using your .content-section element if you want to centre the text in it too) and setting `text-align: center` on the container.

This works because images are part of the phrasing content by default, so they're influenced by the text alignment

 

A combination of you both and that really informative flex website helped!

Thank you! 

 

Taking a web dev course in school this semester and looking forward to it