将GridView移动到div的中心

时间:2014-12-28 14:13:36

标签: html css asp.net gridview position

我知道之前已经问过这个问题。我已经尝试了一切,但似乎没有任何工作。 这是我的HTML和CSS代码..



body {
    color: #666;
    font: 12px/17px Arial,Helvetica,sans-serif;
    background: -moz-linear-gradient(center top , #C9D3DF 0%, #FFF 100%) no-repeat scroll 0% 0% transparent !important;
    
}
#container{ 
    width:1349px;
    height:auto;
}

#wrapper{
    width:940px;
    height:auto;
    margin: 0px auto 0px auto;
    padding: 0px;
    position: static;
    box-shadow:2px 2px 5px 5px #888888;
    -webkit-box-shadow: 2px 2px 5px 5px #888888;
    -moz-box-shadow: 2px 2px 5px 5px #888888;
    background-color: #FFFFFF;
    border-radius: 8px;
}

#header {
    margin: 0px auto 0px auto;
    padding: 0px;
    position: static;
    width: 940px;
    height: 169px;
        }

#contentholder {
    width:940px;
    height:111px;
    padding:0px;
    margin:0px;
}

#logo {
    margin:14px 0px 0px;
    height:67px;
    width:397px;
    padding:0px;
    float:left;
    overflow:hidden;
}

#linkholder {
    height:31px;
    width:323px;
    float:right;
    overflow: hidden;
    margin: 0px 0px 2px;
    padding:5px;
}

#links {
    float: right;
    font-size:small;
    height: 0px;
    padding-right:7px;
    padding-top:3px;
    width: 176px;
}


#links li {
    margin: 0px 0px 0px 9px;
    float: left;
    height: 26px;
    display: inline;
    padding-right:15px;
    color:blue;
    padding:3px;
    border-radius:10px;
    box-shadow: 1px 1px 2px 2px #888888;
    text-align:center;
}

#menu {
    width:940px;
    height:45px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: #0000FF;
    color: #FFFFFF;
    border-radius: 8px;
}

#menu ul {
    height: 31px;
    padding: 15px 0px 0px 0px;
    margin: 0px;
    overflow:hidden;
    }

#menu li {
    display: inline;
    padding: 20px; 
    text-align:center;
}

#image{
    width: 940px;
    height: 250px;
    margin: 0px auto 0px auto;
    padding: 0px;
    position: static;
    background-color: #0000FF;
}

#image img {
    width:100%;
    height:100%;
}

#mbody {
    height:auto;
    width:940px;
    margin: 0px auto 0px auto;
    padding: 0px;
    position: static;
}

#mbody h1 {
    text-align:center;
}

#text{
    width:800px;
    margin: 0px auto 0px auto;
    text-align:justify;
    padding: 0px 20px 0px 20px;
}

#footer {
    width: 940px;
    height:60px;
    margin: 0px auto;
    overflow: hidden;
}

#copyrt {
    text-align:center;
    color:gray;
    padding-top:20px;
}

#mission {
    width:46%;
    text-align:justify;
    float: left;
}

#mission h2 {
    text-align:center;
}

#vision {
    width:41%;
    text-align:justify;
    float: right;
}

#vision h2 {
    text-align:center;
}

.gview {
    height: 100px;
    width:200px;
    margin-left: auto; margin-right: auto;
    box-shadow: 1px 2px 1px 2px #888888;
    position:relative;
}

</head>
<body>
    <form id="form1" runat="server">
        <!-- header placement -->
        <div id="container">
            <div id="wrapper">
                <header id="header">
                    <div id="contentholder">
                        <span id="logo">
                            <img src="Images/logo.png" /></span>
                        <div id="linkholder">
                            <ul id="links">
                                <li>Admin Login</li>
                                <li>Register</li>
                            </ul>
                        </div>
                    </div>
                    <!--Menu creation-->
                    <nav id="menu">
                        <ul>
                            <li>Home</li>
                            <li>Patient Care</li>
                            <li>Doctors</li>
                            <li>Appointments</li>
                            <li>Departments</li>
                            <li>Blood Bank</li>
                            <li>About Us</li>
                        </ul>
                    </nav>
                </header>
                <!-- Main image -->
                <div id="image">
                    <img src="/Images/cardio.jpg" alt="Cardiology" />
                </div>
                <!--Main content-->
                <div id="mbody">
                    <div id="text">
                        <h1>Department of Cardiology</h1>
                        <p>
                            Cardiovascular diseases are the main factor of death in the Western World, and they represent a challenge for diagnosis, treatment and research. Sigma Medicare is always prepared 
                        to provide patients with the most accurate diagnosis and professional manner of treatment. Our doctors are dedicated to your health. In addition to quality care, 
                        our department is also involved in teaching and numerous researches. 
                        </p>

                        <div class="gview">
                            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CID" DataSourceID="SqlDataSource1" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center">
                                <Columns>
                                    <asp:BoundField DataField="CID" HeaderText="CID" InsertVisible="False" ReadOnly="True" SortExpression="CID" />
                                    <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                                    <asp:BoundField DataField="Designation" HeaderText="Designation" SortExpression="Designation" />
                                    <asp:BoundField DataField="Qualification" HeaderText="Qualification" SortExpression="Qualification" />
                                    <asp:BoundField DataField="Shift" HeaderText="Shift" SortExpression="Shift" />
                                    <asp:BoundField DataField="Appointment_Timings" HeaderText="Appointment_Timings" SortExpression="Appointment_Timings" />
                                </Columns>
                            </asp:GridView>
                            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:masterConnectionString %>" SelectCommand="SELECT * FROM [Cardiology]"></asp:SqlDataSource>
                        </div>
                    </div>
                </div>
                <!--Footer Content-->
                <footer id="footer">
                    <p id="copyrt">Copyright &copy 2015, by Sigma Medicare. All rights reserved.</p>
                </footer>
            </div>
        </div>
    </form>
</body>
&#13;
&#13;
&#13;

请注意,容器DIV为800px。任何形式的帮助将不胜感激。我已经尝试了以前建议的所有内容,但似乎没有任何工作。 感谢。

编辑:@Lal:输入页面和CSS的完整代码..

1 个答案:

答案 0 :(得分:0)

你对CSS没有问题,这是正确的。实际上div是中心对齐的。我已经在你自己的问题中编辑了片段。看到它..

问题在于GridView。我认为你有一些CSS覆盖了应用于gview的样式。请仔细检查应用于GridView的样式。