我有一个五列定价表，显示like this
前三名
并且剩下的两个在
之下但我希望底部两个像我提供的图像一样居中
我希望我想要实现的目标是明确的，任何人都可以提供协助。
我的css是
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
虽然我的HTML是
<div class="container">
<div class="columns">
<ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
</div>
我只为其中一个列添加了代码，因为我不希望我的帖子被代码填充（但是其余4列的代码都是相同的）
答案 0 :(得分：0)
您可以在父级上使用display: flex; flex-wrap: wrap; justify-content: center;。这将允许列包装并居中对齐。
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.columns {
width: 33.3%;
padding: 8px;
} <div class="container">
<div class="columns">
<ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
</div>
您还可以将inline-block与text-align: center一起使用。您可能希望在text-align: left上重新应用.columns，但根据您的屏幕截图，由于文本中心对齐，因此没有必要。
* {
box-sizing: border-box;
}
.container {
text-align: center;
}
.columns {
display: inline-block;
padding: 8px;
width: 33.3%;
}<div class="container">
<div class="columns">
<ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div><div class="columns">
<ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div><div class="columns">
<ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns"><ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns"><ul class="price">
<li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br>
Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>
<li style="background-color:white; text-align: left" > <strong style="color: teal">Material:</strong> 300 gsm matte card paper stock with 600 gsm options</li>
<li style="background-color:white; text-align: left" ><strong style="color: teal">Finishing:</strong> Matte Lamination with round corner options</li>
<li style="background-color:white; text-align: left " > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>
<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
</div>