CSS positioning problem [ Solved ]

HTML-CSS
1

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

2

I’ve been growing more and more fond of flexbox:

.container {
  background-color: gray;
  height: 20em;
}
.vertical-align {
  display: flex;
  align-items: center;
}
.pic {
  width: 10%;
}
.text {
}
3

If I were to start using flex box, what percent of site viewers wouldn’t be able to see the proper styles? Do many people really still use past versions of IE? What would they see instead of my nice flex box styled content?

4

I have no idea, but since flexbox controls the main layout of your page, therefore the layout would be some sort of distorted! dont worry, ie10’s and below are almost gone in this world… here in our city, only 2 or 1% were left… most of them because iEs are built in to new Units… and new PC users (who basically wont know how to install another browser) would probably use it for a week or two, before knowing chrome or mozilla exists!

1 Like