个人中心
gpt4 book ai didi

html - 将 GridView 移动到 div 的中心

转载 作者：行者123 更新时间：2023-11-28 08:44:22 25 4
gpt4 key购买 nike

我知道以前有人问过这个问题。我已经尝试了这一切，但似乎没有任何效果。这是我的 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>

请注意容器 DIV 为 800px。任何形式的帮助将不胜感激。我已经尝试了之前建议的所有方法，但似乎没有任何效果。谢谢。

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

最佳答案

您的 CSS 没有问题，它是正确的。实际上 div 是居中对齐的。我已经编辑了您问题本身中的片段。看到它..

问题出在 GridView 上。我认为您有一些 CSS 覆盖了应用于 gview 的样式。因此，请检查为您的 GridView 应用的样式。

关于html - 将 GridView 移动到 div 的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27677210/

25 4 0
文章推荐： javascript - IE8显示图像，Chrome/Firefox使用BlockUI不显示图像
文章推荐： javascript - 传播 div 高度取决于其父 div 高度
文章推荐： ADAL 登录的 iOS 9 canOpenURL 错误
文章推荐： javascript - 动态 iframe 高度 - 似乎需要重新加载页面
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com