我正在尝试从表转换为引导网格,以实现移动可比性。下面是它们在一个页面上的图片,但是尽管它们都遵循相同的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>
                &nbsp;<br />
                Tire Dressing<br>Tire and Rim Detailing<br>Engine Shampoo<br />
                &nbsp;<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 />
                    &nbsp;<br />
                    Complete Detail<br>In & Out Windows<br>Door Jam Cleaning<br />
                    &nbsp;<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 &amp; Out Windows</td>
                <td class="package_text">Tire Dressing</td>
            </tr>
            <tr class="package_text">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="package_price">Cars:$119&nbsp;&nbsp;&nbsp;SUVs:$129</td>
                <td class="package_price">Cars:$99&nbsp;&nbsp;&nbsp;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 &amp; Out Windows</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="package_price">Cars:$119&nbsp;&nbsp;&nbsp;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>&nbsp;</td></tr>
                   <tr><td class="package_price">Cars:$99&nbsp;&nbsp;&nbsp;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;
}

10-01 04:44
查看更多