Numerous issues with portfolio,Help appreciated!

So I’ve been working on this project for quite a while now.

and after reading and searching and lots lots lots of frustration couldn’t find a solution to the following:

-Cant center my divs with center methods, meaning I did it by specifying the margins which is not ideal

-my Images on the portfolio section do not align vertically and seemingly placed randomly ,don’t know why

-Images and text don’t align- I partially solved it by reducing font size…

Feeling pretty stuck right now:tired_face:

Thanks in advance for any helpers:sweat_smile:

Hello - centering content in CSS can be tricky (vertical centering is notoriously tedious).

A relatively easy way to address this problem is to use flexbox. Flexbox allows you to specify on a container how you want the child elements to behave.

I drew up a fiddle for you here with some comments. As you can see its pretty simple to center a div horizontally and vertically inside of another one: check it out

In you profile it looks like you are trying to have four images line up to make a square. Again, this is a great task to handle with flexbox. I’ve created a similar layout for you here: check it out
I didn’t include comments on this one because you should read about flexbox and figure out how it is working on your own so you can really learn it. Notice the css for the pink div tells the blue div how to behave. And the Css for the blue div tells the yellow divs how to behave.

Also in general try to think of elements on a webpage in terms of parent and child containers. Once you understand what the parent and it’s children should look like, building layouts becomes a lot easier.

Hope this all helps

1 Like