Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
There was a popular article written a few weeks ago called “Vertical align anything with just 3 lines of CSS“. This approach to vertically aligning things with top
and translateY
is something we’ve used recently, but in a little different context. We had to fit images into responsive containers that had fluid widths
and set heights
, and all we knew were the widths
of the images.
We took a mobile first approach, and used both translateY
and translateX
to keep the image centered at all times. This works in IE9 and up, but the fallback is pretty simple.
So to get started, we first created the container that the image was going to live in.
Quick note: we’re using Compass @include
s for CSS3 properties
<div class="img-contain"></div>
.img-contain { width: 50%; height: 15em; margin: 0 auto; overflow: hidden; }
Then threw in an image.
<div class="img-contain"> <img class="img" src="https://placekitten.com/800/500"> </div>
And started in with the magical transform
property, using the translateX
value.
.img { position: relative; left: 50%; @include translateX(-50%); max-height: 100%; }
This positioned our image horizontally (not vertically quite yet) within the container. There comes a point, though, where the width of the container becomes wider than the width of the image, which leaves an unwanted gap to the left and right of the image. Since we always want our image to take up the full space of the container, we have to switch gears at a certain breakpoint and set the image’s width
to 100%
and start the vertical centering.
.img { position: relative; left: 50%; @include translateX(-50%); max-height: 100%; @media (min-width: 800px) { left: 0; // set the left back to 0 max-height: none; // remove the max-height max-width: 100%; @include translateY(-50%); } }
How did we come up with 800px
as our breakpoint? Because that’s the width
of the source image. In order to place the breakpoint correctly, you’ll have to know the width
.
Explore Web Development Courses
IE8 will not get the “centered” treatment without some pretty in-depth calculations to determine the aspect ratio. Without getting into that, all you know need to do to make the images at least take up the entire container is, either by detecting older browsers with Modernizr or using an IE8 stylesheet, set margin-left: -50%
on the image and then margin-left: 0; margin-top: -50%
on the image inside the media query.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareThank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2020 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.