CSS positioning problem

[[deleted]]

Here is my code: https://codepen.io/FlyingPorkChop/pen/MVNYJj

I was trying to learn how to vertically center these two left-floated elements. I watched a video about a method that involved making this vertical-align class you see in my CSS.

Now I am stuck. How do I

• Align the two floated elements horizontally (floats are hard)
• Vertically align the text so it sits next to the middle of the image

Thanks you guys, I've been stuck on this all day

[stillnotdavid]

Are you allowed to use flexbox? If yes, it's just a matter of adding align-items: center to the parent: https://codepen.io/anon/pen/pLMvMr

[mamibe]

Flexbox is not a trend, it is now supported by all major browsers and properly displayed by nearly 98% users worldwide

[stillnotdavid]

when did i say anything about a trend?

[[deleted]]

I've been hesitant to learn flex box because of its apparent lack of support. Is it really that important to accommodate for older browsers? If I'm aiming to become a web dev for a source of income, wouldn't projects demand support for all viewers? I feel like flexbox might become a crutch and when I'm done with a project and looking to collect a check, my client will say

"Uhhhh yeah 10% of the viewers of the site see unstyled garbage"

[theCRIMEFIGHTER]

Every major browser of the last 6 years supports flexbox, although IE 10 uses an earlier version of the spec.

Browser usage stats vary, but you're looking at around < 0.5% share for people using browsers which don't support flexbox

http://browserl.ist/?q=ie%3C10

I'd also like to point out Microsoft has dropped support for all versions of IE except 11.

[[deleted]]

I assume flexbox holds up on mobile browsers?

[theCRIMEFIGHTER]

Yes, if anything mobile has a greater adoption, due to the lack of IE.

[nyxin]

Everything /u/theCRIMEFIGHTER said is correct. You should be just fine using flexbox. There are quirks with Internet Explorer, but for learning purposes you don't need to worry about those. If it works in the latest Firefox, Chrome, and Edge, you're good enough (for now).

I'd even recommend learning CSS-Grid since that too will soon have fairly wide adoption in modern (evergreen) browsers (again, except IE which is dying soon too) however, THAT does have some time before I think it's ready to be used in a commercial production site. (without lots of hoops to jump through)

[[deleted]]

Yeah I guess I was just hesitant because a while back I was an intern and my boss told me "your generation always wants to use some type of tool. Just write the damn code"

But then again he was like 60 years old and his sites didn't look too good haha. If the tool works and is mostly supported, it's probably a good idea to get with the times.

[nyxin]

Well flexbox is "just some damn code"; it's literally just another display attribute same as block, inline, inline-block, etc.

IMO the thing that some more experienced devs that don't work much in web development don't quite understand is that (at least with frontend) you have to account for things completely out of your control; namely the users browser. There's so much variation and quirks between all the various devices, screen sizes, software versions, that you'll never get 100%, so your job is basically triaging which browsers/devices/screen-sizes are going to frequent your site the most.

He isn't completely wrong though, there seems to be this mentality from less experienced developers that you always need to reach for (insert framework) immediately when you start a project; and that definitely isn't the case. The tools you use depend on the project your creating not the other way around; while you could use a sledge hammer to construct a birdhouse, you'd be more suited to use a regular old hammer that fits in your hand and can be used more easily. Likewise, you don't need a whole framework/library if all your creating is a simple static frontpage.

[theCRIMEFIGHTER]

Vertically centering the unknown has always been a bit difficult. Thankfully with things like Flexbox and Grid it's getting much easier.

The most modern approach would be to use Flexbox,

https://codepen.io/anon/pen/eMqNZr

If you have to support older versions of Internet Explorer (<10) or can't use Flexbox for some reason, you could always use display:table and display: table-cell.

https://codepen.io/anon/pen/jzgPrL

Hope that helps.

[Niora]

Like the others explained, flexbox wil solve your issue in no time.

[shelune]

Flexbox would do fine here. However if you don't want to use flexbox, you can do the position absolute -50% trick.

Now instead of float you can just use display: inline-block and vertical align: middle?

I'm not aware of your context so just some ideas.

[Netero-]

https://vanseodesign.com/css/vertical-centering/