将图像左对齐不起作用。试过text-align,float等

时间:2015-11-08 04:52:22

标签: asp.net

您好,我是ASP.Net的初学者。我有一个昨天正在运行的网页,但现在已经坏了。我尝试了我找到的所有解决方案,但它没有工作。对不起,如果有重复的问题,但解决方案对我不起作用。 你能帮我么。 我的代码是:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap.min.js" rel="stylesheet" />
    <link href="bootbox.js" rel="stylesheet" />
    <link href="bootbox.min.js" rel="stylesheet" />
    <link href="jquery.js" rel="stylesheet" />
    <link href ="jquery-1.11.3.min.js" rel="stylesheet" />


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>

    <script src="bootbox.min.js"></script>



    <title>


    </title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }


        .auto-style2 {
            height: 23px;
        }
        .auto-style3 {
            width: 252px;
        }
        .auto-style4 {
            height: 23px;
            width: 252px;
        }
        .auto-style5 {
            width: 381px;
        }
        .auto-style6 {
            height: 23px;
            width: 381px;
        }

        #ImageButton2{
             position: absolute;
             top: 0px;
             right: -1px; }
        .auto-style7 {
            width: 5px;
        }
        .auto-style8 {
            height: 23px;
            width: 5px;
        }
        #Image2{

              float:left;
               text-align: left; 

        }


        .left{
             float:left;

        }
        .test{
            float:left;
               text-align: left;

        }
    </style>

    <script type="text/javascript" lang="javascript">

        function pLogin() {
            var result;
            bootbox.confirm("Do you have an existing account?", function (result) {
                if (result == true) {
                    window.location.href ="/login.aspx"
                }
                else
                 {}     
                });
                return false
            }





  </script>


</head>
<body>
    <form id="form1" runat="server">
    <div>

        <table class="auto-style1">
            <tr>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style5">&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style8">
                    &nbsp;</td>
                <td class="auto-style4">
                    <asp:ImageButton ID="ImageButton1" runat="server" Height="113px" ImageUrl="~/images/baby's logo.png" Width="407px" />
                </td>
                <td class="auto-style6">&nbsp;</td>
                <td class="auto-style2"></td>
                <td class="auto-style2">
                    <asp:ImageButton ID="ImageButton2" runat="server" Height="111px" ImageUrl="~/images/ordernow.jpg" Width="135px" OnClientClick="javascript: return pLogin();" />

                </td>
            </tr>
        </table>

    </div>
    <div>
        <hr />
    </div>
        <div>
            <p class="test">
              <asp:Image ID="Image2" runat="server" Height="500px" Style="float:left" ImageUrl="~/images/puto cake.jpg" Width="960px" />
            </p>
              </div>
         <div>



          </div>

        <div>
            <table class="nav-justified">
                <tr>
                    <td class="auto-style11">&nbsp;</td>
                    <td class="auto-style22">
                        <asp:Label ID="Label1" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="ORDER" ViewStateMode="Enabled" Width="100px"></asp:Label>
                    </td>
                    <td class="auto-style22">
                        <asp:Label ID="Label2" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="CUSTOMER SERVICE" ViewStateMode="Enabled" Width="239px"></asp:Label>
                    </td>
                    <td class="auto-style16">
                        <asp:Label ID="Label3" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="MY ACCOUNT" ViewStateMode="Enabled" Width="100px"></asp:Label>
                    </td>
                    <td>
                        <asp:Label ID="Label4" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="CONNECT WITH BABY'S PUTO CAKE" ViewStateMode="Enabled" Width="317px"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style17"></td>
                    <td class="auto-style23">
                        <asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Arial Black" ForeColor="Black">Puto Cake</asp:HyperLink>
                    </td>
                    <td class="auto-style23">
                        <asp:HyperLink ID="HyperLink2" runat="server" Font-Names="Arial Black" ForeColor="Black">Contact Us</asp:HyperLink>
                    </td>
                    <td class="auto-style20">
                        <asp:HyperLink ID="HyperLink3" runat="server" Font-Names="Arial Black" ForeColor="Black">Create an Account</asp:HyperLink>
                    </td>
                    <td class="auto-style21">
                        <asp:ImageButton ID="ImageButton3" runat="server" Height="36px" ImageUrl="~/images/Facebook-128 (1).png" Width="44px" />
                        <asp:ImageButton ID="ImageButton4" runat="server" Height="36px" ImageUrl="~/images/Twitter-Bird-128 (1).png" Width="44px" />
                        <asp:ImageButton ID="ImageButton5" runat="server" Height="36px" ImageUrl="~/images/youtube_circle_color-512.png" Width="44px" />
                    </td>
                </tr>
                <tr>
                    <td class="auto-style11">&nbsp;</td>
                    <td class="auto-style22">&nbsp;</td>
                    <td class="auto-style22">&nbsp;</td>
                    <td class="auto-style16">
                        <asp:HyperLink ID="HyperLink4" runat="server" Font-Names="Arial Black" ForeColor="Black">Sign In</asp:HyperLink>
                    </td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style11">&nbsp;</td>
                    <td class="auto-style22">&nbsp;</td>
                    <td class="auto-style22">&nbsp;</td>
                    <td class="auto-style16">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style11">&nbsp;</td>
                    <td class="auto-style22">&nbsp;</td>
                    <td class="auto-style22">&nbsp;</td>
                    <td class="auto-style16">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </div>
    </form>

    <div>
        <br />
        <br />
        <br />

    </div>

    </body>
</html>

1 个答案:

答案 0 :(得分:0)

正如我所见,你没有像块元素那样使你的图像(默认情况下图像是内联元素)。尝试在CSS类中使用display: block;display: inline-block;,然后使用text-align: left;

浮动元素也可能表现不正确,因为即使您使用块级元素,它们也会“压缩”到内容中。因此,也尝试从CSS类中删除浮动规则或使用clear:left;