大佬教程收集整理的这篇文章主要介绍了无法左对齐 div 项目，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一张桌子，其中一个 TD 中有一些物品。我需要它们居中但左对齐。
现在 td 看起来像这样：
$12.95 稍微向左。
我希望它看起来像这样：
代码如下：
table {
border-collapse: collapse;
}
table tr {
text-align: center;
margin-bottom: 1px;
}
table td {
border: 1px solID #ddd;
Font-size: 13px;
padding: 10px 0;
height: 90px;
wIDth: 100px;
}
table tr td:last-child{
wIDth: 200px;
}
.price-container .price-package-one,.price-container .price-package-two,.price-container .price-package-three {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.price-container .price-package-one .price-value p,.price-container .price-package-two .price-value p,.price-container .price-package-three .price-value p {
Font-size: 15px;
Font-weight: bold;
}
.price-container .price-package-one .price-value span,.price-container .price-package-two .price-value span,.price-container .price-package-three .price-value span{
Font-size: 11px;
}
.price-container .price-package-one .price-saving p,.price-container .price-package-two .price-saving p,.price-container .price-package-three .price-saving p{
color: red;
Font-weight: bold;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/CSS/bootstrap.min.CSS" rel="stylesheet"/>
<table>
<tbody>
<tr>
<td>name</td>
<td>Details</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="price-container">
<div class="price-package-one">
<div class="price-value text-left mr-5">
<p class="m-0">$2.49/month</p>
<span>(24 months)</span>
</div>
<div class="price-saving text-left">
<p class="m-0">Save <br>74%</p>
</div>
</div>
<div class="price-package-two">
<div class="price-value text-left mr-5">
<p class="m-0">$6.49/month</p>
<span>(06 months)</span>
</div>
<div class="price-saving text-left">
<p class="m-0">Save <br>47%</p>
</div>
</div>
<div class="price-package-three">
<div class="price-value text-left mr-5">
<p class="m-0">$12.95/month</p>
<span>(01 month)</span>
</div>
<div class="price-saving text-left">
<p class="m-0">Save <br>7%</p>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
使用 space-between 对齐，然后在两侧添加空格。为此，您可以依靠引导程序类
table {
border-collapse: collapse;
}
table tr {
text-align: center;
margin-bottom: 1px;
}
table td {
border: 1px solid #ddd;
font-size: 13px;
padding: 10px 0;
height: 90px;
width: 100px;
}
table tr td:last-child{
width: 200px;
}
.price-container .price-value p {
font-size: 15px;
}
.price-container .price-value span{
font-size: 11px;
}
.price-container .price-saving p{
color: red;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<tbody>
<tr>
<td>Name</td>
<td>Details</td>
</tr>
<tr>
<td>Item 1</td>
<td>
<div class="price-container">
<div class="price-package-one d-flex justify-content-between px-3 mb-2">
<div class="price-value text-left">
<p class="font-weight-bold m-0">$2.49/month</p>
<span>(24 months)</span>
</div>
<div class="price-saving text-left">
<p class="font-weight-bold m-0 ">Save <br>74%</p>
</div>
</div>
<div class="price-package-two d-flex justify-content-between px-3 mb-2">
<div class="price-value text-left">
<p class="font-weight-bold m-0">$6.49/month</p>
<span>(06 months)</span>
</div>
<div class="price-saving text-left">
<p class="font-weight-bold m-0">Save <br>47%</p>
</div>
</div>
<div class="price-package-three d-flex justify-content-between px-3 mb-2">
<div class="price-value text-left">
<p class="font-weight-bold m-0">$12.95/month</p>
<span>(01 month)</span>
</div>
<div class="price-saving text-left">
<p class="font-weight-bold m-0">Save <br>7%</p>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
以上是大佬教程为你收集整理的无法左对齐 div 项目全部内容，希望文章能够帮你解决无法左对齐 div 项目所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。