Question

我不是一个很难的CSS编码器，我需要帮助。在这个项目中，我有一个徽标，并且在崩溃md-3部分时不知道如何将图像居中。

当网站处于桌面视图col-md-3时;我想垂直对齐图像“左中”，当它调整大小到col-sm-3或col-xs-3定位到中间中间时;。

以下是网址; http://test2.supraz2000.com/

该部分是......

<div class="container">
    <div class"row">
        <!-- 1rst Row of 3 Top Header section -->    
        <div class="col-md-3 text-center" style="color:#FFFFFF; height:125px; padding-top:24px;">
            <a target="_blank" href="/"><img alt="SUPRAZ2000 INC." src="<%=get_skinurl()%>img/logo-supraz-fr.png"></a>
        </div>

        <!-- 2nd Row of 3 Top Header section -->
        <div class="col-md-6 text-center" style="color:#FFFFFF; height:125px; padding-top:18px; text-align:center;">
            <span style="text-align:center !important;"><a href="<%=get_StoreURL()%>shoppingcart.wws"><%= Minicart("cartinfo-total.wws") %></a></span>
            <span style="padding-right:5px;" class="glyphicon glyphicon-folder-open"></span>&nbsp;<a href="<%=get_StoreURL()%>customerdashboard.wws" style="color:#F3CE62;">Mon compte</a>&nbsp;&nbsp;&nbsp;&nbsp;<span style="padding-right:5px;" class="glyphicon glyphicon-search"></span>&nbsp;<a href="<%=get_StoreURL()%>customerorderhistory.wws" style="color:#F3CE62;">Retracez une commande</a>&nbsp;&nbsp;&nbsp;&nbsp;<span style="padding-right:5px;" class="glyphicon glyphicon-shopping-cart"></span>&nbsp;<a href="<%=get_StoreURL()%>validateshoppingcart.wws" style="color:#F3CE62;">Mon panier</a>
        </div>

        <!-- 3rd Row of 3 Top Header section -->
        <div class="col-md-3 text-center" style="height:125px; color:#FFFFFF; text-align:center; padding-top:16px;">
            <div class="text-center">
                <table width="250" height="90" border="0" cellspacing="0" cellpadding="0" align="center">
                    <tbody>
                        <tr>
                            <td style="background-image:url(img/telephone_tollfree-fr.png); background-repeat:no-repeat;">
                                <div id="tel" style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:24px; color:#000000; letter-spacing:-1px; text-shadow:1px 1px #FFFFFF; padding-left:73px;"></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Answer 1

我自己最终找到了答案。

我需要重置关于＆＃34; @media和＆＃34;的CSS代码用于屏幕分辨率，并根据徽标需要定位的位置重新排列。

Bootstrap 3 - 图像垂直对齐在桌面中间左侧，并以移动/平板电脑视图为中心

1 个答案: