Question

所以我有一个分屏的网页，一半是70％，另一半是30％宽，我有两个相同的页脚图像..但是当我试图使图像居中时，它不适用于一些奇怪的原因..页面的其余部分定位正常，但我的图像不居中，我被告知一个webkit可能有帮助？有人可以帮忙吗？

的CSS

body {
           font-family: Arial;
           color: white;
       }

       .split {
           height: 100%;
           position: fixed;
           z-index: 1;
           top: 0;
           overflow-x: hidden;
           padding-top: 20px;
       }

       .left {
           left: 0;
           background-color: #110;
           width: 30%;
           height: 100%;
           text-align: center;
       }


       .right {
           right: 0;
           background-color: white;
           width: 70%;

           text-align: center;
       }

       .centered {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           text-align: center;
       }


       .center {
           text-align: center;


       }

    .auto-style1 {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 49%;
        left: 43%;
    }

       h1 {
           color: red;
           font-weight: bold;
           padding-top: 20px;
       }

       div { padding: 30px 10px 15px; }

       .imgFooter {
           display: block;
           left: 150px;
           text-align: center;
           position: absolute;
           bottom: 10%;


       }

和html -

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WorkStationUITarget.Default" %>

<!DOCTYPE html>
<html>
<head>
    <%--<meta http-equiv="refresh" content="10" > <%--refreshes after 10 seconds --%>--%>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="CSS/style.css" rel="stylesheet" />
   <script>
       window.setTimeout('document.forms[0].submit()', 5000); //refresh the page (without losing state)
   </script>

    <link href="Stylesheet/styles.css" rel="stylesheet" />

</head>
<body style="height: 100%">

   <form runat="server" name="PackingStatsForm">

    <div height="100%">
    <div class="split left">
        <div class="center" width:100%>

            &nbsp;
            <h1>TOTAL QUANTITY PACKED</h1>
            <asp:Label ID="labeltotal" runat="server"   Width="100%" Height="100%" Font-Size="270px" style="text-align: center;  padding-top: 800px; color: #ff0000; transform: translate(-50%, -50%); text-align: center; padding-left: 90px; " CssClass="auto-style1" Font-Bold="True"></asp:Label>

        </div>

        <div class ="center" width:100%>
            ***<img class ="imgFooter" src="Logo/siblack1.png"  />***
        </div>
    </div>



    <div class="split right">
        <div class="center" width:100%>

            <asp:DropDownList ID="ddl" runat="server" AutoPostBack="True"  OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged"   Font-Bold="True" ViewStateMode="Enabled" >
            </asp:DropDownList>


            <h1>CELL TARGETS & ACTUAL FIGURES</h1>

            <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="black" BorderStyle="Ridge" BorderWidth="3px" CellPadding="25" ForeColor="Black" GridLines="Horizontal" HorizontalAlign="Center" Font-Size="24px" OnRowDataBound="GridView1_RowDataBound" Width="100%" Font-Bold="True" >
                <AlternatingRowStyle BackColor="White"/>
                <FooterStyle BackColor="#CCCC99"/>
                <HeaderStyle BackColor="white" Font-Bold="True" ForeColor="black"/>
                <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right"/>
                <RowStyle BackColor="#F7F7DE"/>
                <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="black"/>
                <SortedAscendingCellStyle BackColor="#FBFBF2"/>
                <SortedAscendingHeaderStyle BackColor="#848384"/>
                <SortedDescendingCellStyle BackColor="#EAEAD3"/>
                <SortedDescendingHeaderStyle BackColor="#575357"/>
            </asp:GridView>


            <div class="center" width:100% >
                    ***<img  class="imgFooter" src="Logo/siwhite1.png"  />***
            </div>


        </div>
    </div>
  </div>
  </form>

</body>
</html>

将两个页脚放在拆分页面上

0 个答案: