Question about how to align this picture?

[Former Member]

vertical-align will only work for inline elements

If you set the parent to "text-align: center" that would center it horizontally(as long as the parent is a block element(100% width))

If you want to center it using flex, first the parent needs a height, then "jusitify-content: center" and "align-items:center" will work for you.

If you want to set something like a modal to the center of the screen, you need to use negative margins or translate

So if the modal is 600px wide, set left 50% margin-left: -300px, same for the top, or you should really use translate3d(-50%, -50%, 0)

[Tumbleweed]

Kami and Alan Vende , The only reason I jumped in here was because Kami said it was not centered for her and when I looked at it, the avatar was totally to the right. When a few hours passed I figured real life took Kami away so stepped in.

If you want to set something like a modal to the center of the screen, you need to use negative margins or translate
So if the modal is 600px wide, set left 50% margin-left: -300px, same for the top, or you should really use translate3d(-50%, -50%, 0)

@synthtec , I was actually playing with that ^^^as a option, but abandoned it for what I know does work but evidently, it isn't working for Alan. I'll just step out of this so as not to confuse things more. I am curious though Alan, was it centered how you wanted it on my custom page or not? 

[Kami]

Tumbleweed - that's fine! I had a feeling only that it wasn't centred because alan had changed the CSS, so i was wondering what he had changed and why.

[Alanna 🥀🖤]

Just saying that flex box will work wonders with this.

[Jordan]

Dec 21, 2016 3:51:46 GMT -8 @khristian said:

Just saying that flex box will work wonders with this.

Flexbox is a very helpful layout mode for CSS, so I agree with you, but I'd like to point out that it's only partially supported by IE 11 which is a problem in my opinion. I recommend refraining from using it for another year or so since there are quite a few people on IE 10 and even 9.

caniuse.com/#feat=flexbox

[Brian]

Dec 21, 2016 10:29:52 GMT -8 Jordan said:

Dec 21, 2016 3:51:46 GMT -8 @khristian said:

Just saying that flex box will work wonders with this.

Flexbox is a very helpful layout mode for CSS, so I agree with you, but I'd like to point out that it's only partially supported by IE 11 which is a problem in my opinion. I recommend refraining from using it for another year or so since there are quite a few people on IE 10 and even 9.

caniuse.com/#feat=flexbox

We no longer officially support anything below IE11 based on our usage analytics (use percentage for a previously supported browser has to be extremely low for us to drop support for it). It should be fine for them to use flexbox right now.

As a testament to this ProBoards v6 will be much more highly reliant on a flexbox layout, something we wouldn't be confident doing were that not the case.

[Jordan]

That's great to hear, thanks for the information. Seems like the automatic browser updates are really helping.

[Alanna 🥀🖤]

*doesnt give a flying crap about IE*

[Alan Vende]

My apologies, I thought I had responded to this thread. Thank you all for your help. I have thought about it and realized that Kami is correct, it is how I originally said I wanted it. I just didn't realize at the time that I was saying that "it's doesn't look centered" that it cannot be unless the div box below it is taken out. I didn't realize that what I was looking to do was have it horizontally centered.

Thank you so much for all of your help!

I hope you all had a great holiday season!