Html 此页脚中的列居中有问题

Html 此页脚中的列居中有问题,html,twitter-bootstrap,Html,Twitter Bootstrap,我使用的是bootstrap,我有一个4列的页脚。我将它设置为文本中心,它将所有内容都放在列的中心,但也将所有内容设置为中心,使其看起来很奇怪。我想让所有的东西都在他们的专栏中居中,但也保持左对齐,如果这是不可能的任何建议,如何使这看起来更好,将不胜感激。但它需要保持4列 这是我的密码笔 代码如下: <div class="Layout"> <div> <div class="row text-center">

我使用的是bootstrap,我有一个4列的页脚。我将它设置为文本中心,它将所有内容都放在列的中心,但也将所有内容设置为中心,使其看起来很奇怪。我想让所有的东西都在他们的专栏中居中,但也保持左对齐,如果这是不可能的任何建议,如何使这看起来更好,将不胜感激。但它需要保持4列

这是我的密码笔

代码如下:

<div class="Layout">
    <div>
        <div class="row text-center">
            <div class="col-xs-12 col-sm-6 col-md-3 footer-column">
                <div class="h3 m-20 no-m-lr">Contact Us</div>
                <div class="block-center">
                    <p>MySite</p>
                    <p class="block">123xyz st</p>
                    <p class="block">Suite 7</p>
                    <p class="block">Marklar, Mr 555555</p>
                    <p>555-555-5555</p>
                    <p>
                        <a href="mailto:my@email.com">MyEmail</a>
                    </p>
                </div>
            </div>
            <!-- /Column -->
            <div class="col-xs-12 col-sm-6 col-md-3 footer-column">
                <div class="block-center">
                    <h3> Company Information
                </h3>
                    <ul>
                        <li>
                            <a href="/" target="/">About Us</a>
                        </li>
                        <li>
                            <a href="/" target="/">Company Policy</a>
                        </li>
                        <li>
                            <a href="/" target="/">Privacy Policy</a>
                        </li>
                        <li>
                            <a href="/" target="/">About Us</a>
                        </li>
                        <li>
                            <a href="/" target="/">Company Policy</a>
                        </li>
                        <li>
                            <a href="/" target="/">Privacy Policy</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /Column -->
            <div class="col-xs-12 col-sm-6 col-md-3">
                <div class="block-center">
                    <h3> Get The Latest Deals
                </h3>
                    <p class="mail-text saleprice">Sign up today for our latest deals!</p>
          <p>Sign up here: <input type="text"> </p>
                            <p>Join our savings club</p>                        
                    </div>
                </div>
                <!-- /Column -->
                <div class="col-xs-12 col-sm-6 col-md-3 footer-column">
                    <div class="block-center">
                        <h3>We Accept</h3>
                        <p>Accepted Credit Cards</p>
                        <p>Amex</p>
                        <p>Discover</p>
                        <p>Mastercard</p>
                        <p>Visa</p>
                        <div class="paypal-logo">
                            <br>
                                <table border="0" cellpadding="10" cellspacing="0" align="center">
                                    <tbody>
                                        <tr>
                                            <td align="center"></td>
                                        </tr>
                                        <tr>
                                            <td align="center">
                                                <a href="https://www.paypal.com/webapps/mpp/paypal-popup" title="How PayPal Works" onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;">
                                                    <img src="https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/logo-center/12_bdg_payments_by_pp_2line.png" alt="Secured by PayPal" data-image="vrtk4rr60c81">
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- /Column -->
                    </div>
                </div>
            </div>

联系我们
麦斯特

123xyz街

套房7

Marklar先生,555555

555-555-5555

公司信息
获取最新交易

今天就报名参加我们的最新交易

在这里注册:

加入我们的储蓄俱乐部

我们接受 接受信用卡

美国运通

发现

万事达卡

签证


添加此样式:

.block-center {
    text-align: left;
    margin: auto;
    display: inline-block;
}

@robothead,您应该将类“container fluid”添加到布局div中