Trouble with CSS Image Layout

Trouble with CSS Image Layout
0

#1

I’m currently working on the portfolio project page. I’m trying to make two columns of three photos centered in the page, but I can’t figure out why my code isn’t working. Any suggestions would be appreciated!


#2

Maybe something like the following is what you are looking to do?

.photos {
  text-align: center;
  width: 80%;
  height: 100vh;
  margin: auto;
  background-color: lightgrey;
  border: thin solid black;
}
img {
	width: 40%;
	margin: 2%;
  border: thin solid black;
}

#3

I had to take the height property out because the images didn’t stay in the container, but otherwise your code fixed my problem. I didn’t know you could use the text-align property for things other than text. Thanks!


#4

You have not updated the Codepen with my suggestions yet, so I can not test this out. When I used the code, it did not cause this problem. Do you have a screenshot of this phenomenon when using height: 100vh?


#5

I updated the codepen and here’s a screenshot


#6

Interesting. What browser are you using and on what operating system?

Here is your Codepen when viewing from my pc, which is using Window 10 and latest version of Chrome.


#7

I’m also using the latest version of chrome, but I’m running mac OS. I feel like that shouldn’t make a difference though, I’m really curious to know why.