I don’t know why .pricing-container
is not aligning in centre
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Pricing Table</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Sono', sans-serif; }
.pricing-plan {
display: inline-flex;
gap: 5px;
width: 25%;
padding: 15px;
border-radius: 10px;
flex-direction: column;
background-color: #ededed ;
}
.pricing-container {
align-items: center;
justify-content: center;
}
.plan-title {font-size: x-large;}
.plan-price { font-size: xx-large;}
.plan-button {
display: inline;
background-color: orange;
border-radius: 6px;
height: 30px;
}
ul {list-style-type: none}
</style>
</head>
<body>
<div class="pricing-container">
<div class="pricing-plan">
<div class="plan-title">Basic</div>
<div class="plan-price">$9.99/month</div>
<ul class="plan-features">
<li>β
10GB Storage</li>
<li>β
1 User</li>
<li>π« Support</li>
</ul>
<button class="plan-button">Sign Up</a>
</div>
<div class="pricing-plan">
<div class="plan-title">Standard</div>
<div class="plan-price">$19.99/month</div>
<ul class="plan-features">
<li>β
50GB Storage</li>
<li>β
5 Users</li>
<li>β
Phone & Email Support</li>
</ul>
<button class="plan-button">Sign Up</a>
</div>
<div class="pricing-plan">
<div class="plan-title">Premium</div>
<div class="plan-price">$49.99/month</div>
<ul class="plan-features">
<li>β
100GB Storage</li>
<li>β
10 Users</li>
<li>β
24/7 Support</li>
</ul>
<button class="plan-button">Sign Up</a>
</div>
</div>
</body>
</html>
3
Answers
The only properties you’ve applied to
.pricing-container
arealign-items
andjustify-content
. Both of these only affect Grid and Flex layouts of which.pricing-container
is neither (it has descendants which are part of Grid and Flex layouts, but it isn’t part of one itself).As a result, any property which might effect its position (or the position of its content) is the default for a
div
(display: block
,text-align: start
,width: auto
, etc).Possibly you want to set it to
display: flex
but since you are really trying to arrange the grandchildren in a grid you might want to consider replacing all the layout work you’ve done with a grid layout.The starting point for that would be to set
.pricing-container
todisplay: grid
and the.pricing-plan
elements todisplay: content
so you can arrange the.plan-title
etc elements on that grid.In order to use
align-items
&justify-content
, you have to usedisplay:flex
ordisplay:grid
Now the flex items will stack together. So you can simply set
gap
property to give some padding between flex items