Innovation Cloud: Vertical distribute evenly container


#1

What is the best way to ensure that a container is evenly centered vertically within a div? See my picture below for reference.


#2

Can i see your code? It depends on how you centered, read this excellent guide


#3

Ill check the guide you linked.

Here is my CSS:

`/* Main */

.main .container {
margin: 80px auto;
}

.main img {
float: left;
display: inline-block;
}

.p-right {
float: right;
display: block;
max-width: 75%;
}`


#4

The margin you are using:

.main .container {
	margin: 80px auto;
}

will just push down the text by 80px, it doesn't do anything about centering. Everything is rendered with as starting point the top left corner of you screen. So, margin-bottom just pushes the element below down. It doesn't do any centering, use one of the centering tricks from the guide i provided


#5

I used the flexbox method and it works, nice and easy :slightly_smiling:

.main .container {
margin: 80px auto;
display: flex;
justify-content: center;
align-items: center;
}

Now I have another question. The cloud image I have floated to the left needs some margin between the image and the paragraph text. I've applied a 100px margin-right and the spacing looks fine but is that the correct/best implementation to make sure it stays responsive/mobile-friendly?

`.main img {
float: left;
display: inline-block;
margin-right: 100px;
}

.p-right {
float: right;
display: block;
max-width: 75%;
}
`


#6

Did you check browser compactibility for the flex property? And did you check if prefixes are needed?

Best practice? You would have to test it, it depends how the image gets it dimensions (which i don't see), but should be safe, if there isn't enough room the the text should get below the image