我正在尝试从表转换为引导网格,以实现移动可比性。下面是它们在一个页面上的图片,但是尽管它们都遵循相同的css,bootstrap与table不在中心。有人能给我解释一下吗,因为这毫无意义。
谢谢你
桌子在上面,鞋带在下面
这是我的HTML
.platinum2 {
color: #FFFFFF;
font-size: 30px;
font-weight: 600;
line-height: 41px;
text-align: center;
}
.package_text {
color: #FFFFFF;
font-family: "lato";
font-size: 14px;
font-weight: 500;
line-height: 26px;
}
.package_price {
color: #FFFFFF;
font-family: "lato";
font-size: 16px;
font-weight: bold;
line-height: 14px;
text-align: center;
}
.glyphicon-star{
font-size: 20px;
}
<div class="row" style="width:50%;margin-left:25% ; margin-bottom:25px; text-align:center">
<h1 class="platinum2">Platinum <br><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /> </h1>
<div class="col-md-6" >
<span class="package_text">Hand Wash<br>Full Interior<br>Complete Vacuum<br>Leather Clean+Shine<br>
<br />
Tire Dressing<br>Tire and Rim Detailing<br>Engine Shampoo<br />
<br /></span>
<span class="package_price"> Cars: $189</span>
</div>
<div class="col-md-6">
<span class="package_text">Roof Liner<br>Full Body Wax<br>Clay Bar Treatment<br>Interior Shampooing<br />
<br />
Complete Detail<br>In & Out Windows<br>Door Jam Cleaning<br />
<br /></span>
<span class="package_price">SUVs: $199</span>
</div>
</div>
</div>
<div class="container" style="background-image:url('/images/StripedBGDetailPackages.png' ); align-items:center; text-align:center; margin-top:25px; padding-top:25px; background-size:100%" >
<table style="width:50%;margin-left:25% ; margin-right:25%; margin-bottom:25px;">
<tr>
<td class="platinum2">Gold</td>
<td class="platinum2">Silver</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
</tr>
<tr>
<td class="package_text">Hand Wash</td>
<td class="package_text">Hand Wash</td>
</tr>
<tr>
<td class="package_text">Complete Vacuum</td>
<td class="package_text">Clay Bar Treatment</td>
</tr>
<tr>
<td class="package_text">Interior Shampooing</td>
<td class="package_text">Complete Body Wax</td>
</tr>
<tr>
<td class="package_text">Leather Clean+Shine</td>
<td class="package_text">Tire and Rim</td>
</tr>
<tr>
<td class="package_text">Complete Deetail</td>
<td class="package_text">Detailing</td>
</tr>
<tr>
<td class="package_text">In & Out Windows</td>
<td class="package_text">Tire Dressing</td>
</tr>
<tr class="package_text">
<td> </td>
<td> </td>
</tr>
<tr>
<td class="package_price">Cars:$119 SUVs:$129</td>
<td class="package_price">Cars:$99 SUVs:$109</td>
</tr>
</table>
<div class="row" style="width:50%;margin-left:25% ; margin-right:25%; margin-bottom:25px;">
<div class="col-md-6">
<table>
<tr>
<td class="platinum2">Gold</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
</tr>
<tr>
<td class="package_text">Hand Wash</td>
</tr>
<tr>
<td class="package_text">Complete Vacuum</td>
</tr>
<tr>
<td class="package_text">Interior Shampooing</td>
</tr>
<tr>
<td class="package_text">Leather Clean+Shine</td>
</tr>
<tr>
<td class="package_text">Complete Deetail</td>
</tr>
<tr>
<td class="package_text">In & Out Windows</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="package_price">Cars:$119 SUVs:$129</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table>
<tr>
<td class="platinum2">Silver</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-star" style="color:#FFFACC" /></td>
</tr>
<tr>
<td class="package_text">Hand Wash</td>
</tr>
<tr>
<td class="package_text">Clay Bar Treatment</td>
</tr>
<tr>
<td class="package_text">Complete Body Wax</td>
</tr>
<tr><td class="package_text">Tire and Rim</td></tr>
<tr><td class="package_text">Detailing</td></tr>
<tr><td class="package_text">Tire Dressing</td></tr>
<tr><td> </td></tr>
<tr><td class="package_price">Cars:$99 SUVs:$109</td></tr>
</table>
</div>
</div>
最佳答案
为了调试,首先我添加了以下内容,因为您的文本是白色的,边框为1px纯红,这样做很容易看出为什么它没有居中!检查链接
body {
background-color: gray;
}
* {
border: 1px solid red;
}
https://jsfiddle.net/dalinhuang/aLpv8k3f/4/
现在,正如你所看到的,它在正确的位置,这是因为
您只需将以下类添加到您的
Gold BS
.fullwidth {
width: 100%;
}
好的,完整的解决方案,删除我们添加的调试内容:
https://jsfiddle.net/dalinhuang/aLpv8k3f/5/
另外,我认为你的星不在同一行,更新你的
<table class="fullwidth">
来添加这个.glyphicon-star
。.glyphicon-star {
font-size: 20px;
margin-top: -1px;
}