首页 > 解决方案 > 在aspx页面中动态排列图像

问题描述

当我打开我的 aspx 页面时,我在桌面上水平并排有 3 个图像。但我想在移动设备中打开我的页面,这些图像垂直居中对齐。除图像外,页面上的内容应保持不变。

页面

<div class="row enrollmentStep">
        <div class="col-xs-12 step-container">
            <!-- Top Container -->
            <div class="row inner-step-container">
                <div class="col-xs-12 top-spacing">
                    <div align="center" class="row">
                        <div id="pageDescription" class="col-xs-12" runat="server"></div>
                    </div>
                    <table align="center" border="0" cellpadding="3" cellspacing="0" width="100%">

                        <tr>
                            <div align="center">
                                <asp:Image ID="qrCodeImage" runat="server" Height="200px" Width="200px" Visible="true" />
                            </div>
                            <div align="center">
                                <a id="secret" runat="server" class="txtLabel" visible="true" target="_blank"></a>

                                <td>
                                    <div align="center">
                                        <label id="siLabel" runat="server" for="siBox" class="txtLabel"></label>
                                    </div>
                                </td>
                            </div>

                        </tr>
                    </table>
                    <div class="imgrow" align="center" visible="true">


                        <div class="top-spacing bottom-spacing" style="float: left;  margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
                            <a id="iTunesLink" runat="server" class="txtLabel" visible="true" target="_blank">

                                <asp:Image ID="itunes" Height="64px" Width="128px" runat="server" Visible="true" />
                            </a>
                        </div>


                        <div  class="top-spacing bottom-spacing" style="float: left; align:center; margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
                            <a id="play_storeLink" runat="server" class="txtLabel" visible="true" target="_blank">

                                <asp:Image ID="play_store" Height="64px" Width="128px" runat="server" Visible="true" />
                            </a>
                        </div>


                        <div class="top-spacing bottom-spacing" style="float: left;  margin-left: 20%; margin-bottom: 0.5em; overflow:auto">
                            <a id="windows_storeLink" runat="server" class="txtLabel" visible="true" target="_blank">

                                <asp:Image ID="windows_store" Height="64px" Width="128px" runat="server" Visible="true" />
                            </a>
                        </div>
                    </div>
                </div>
        </div>
            </div>
        </div>

标签: cssasp.net

解决方案


推荐阅读