Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialChristopher Chard
3,087 Pointsalign-items doesn't have any effect despite identical code to the lesson
Right at the start of the video, I've launched the workspace and previewed it and there's already a difference: Guil's flex-item fills the vertical space initially but mine doesn't.
After applying "justify-content: center;" and "align-items: center;" to .container, the flex-item moves to the horizontal centre but not the vertical centre.
Could this be due to browser differences? I am using IE 11. I have opened it in Safari on my iPhone 4s but the item filled the entire horizontal space so this didn't help me understand it!
Update: I should add that the other two approaches of "align-self: center;" or "margin: auto;" also had no vertical effect.
Christopher Chard
3,087 Points<!DOCTYPE html>
<html>
<head>
<title>Flexbox Layout</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/page.css">
<link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
<div class="container">
<div class="item-4 item">
Flex Item
<p>Vertical and Horizontal centering made easy!</p>
</div>
</div>
</body>
</html>
1 Answer
Glenré Charl Labuschagné
23,204 PointsHi Christopher,
Please see: caniuse.com. Odd that it's not working. When in doubt prefix:
.container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
Christopher Chard
3,087 PointsThanks. Identified from caniuse.com that vertical alignment will not work when min-height is used in IE11.
Glenré Charl Labuschagné
23,204 PointsAwesome: caniuse.com is a definite must have bookmark developer tool. Thanks for sharing your find about IE11.
Christopher Chard
3,087 PointsChristopher Chard
3,087 Points