Question

我有一个网页图表组件，我想要浏览器的显示中心，这个HTML代码：

<div class='center1'>

            <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" CrosshairEnabled="True" Height="500px" Width="500px" AppearanceNameSerializable="Dark">
            </dxchartsui:WebChartControl>

        </div>

以及css代码是这样的：

.center1 {

            width:800px;
            border-radius: 5px;

            width: 60%; 
            height:200px; 
            margin: 0 auto;
            text-align: center;
            align-content:center;
        }

但是在运行网页时告诉我这个：

我该如何解决？

我的完整网页html：

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

<%@ Register assembly="DevExpress.XtraCharts.v15.1.Web, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts.Web" tagprefix="dxchartsui" %>
<%@ Register assembly="DevExpress.XtraCharts.v15.1.Web, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts.Web.Designer" tagprefix="dxchartdesigner" %>
<%@ Register assembly="DevExpress.XtraCharts.v15.1, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraCharts" tagprefix="cc1" %>

<%@ Register assembly="DevExpress.XtraReports.v15.1.Web, Version=15.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.XtraReports.Web" tagprefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <link href="css/main.css" rel="stylesheet" />
    <link href="css/normalize.css" rel="stylesheet" />

    <style>
        .center {

            width:800px;
            border-radius: 5px;

            width: 60%; 
            height:200px; 
            margin: 0 auto;
            text-align: center;
        }
         .center1 {

            width:800px;
            border-radius: 5px;

            width: 60%; 
            height:200px; 
            margin: 0 auto;
            text-align: center;

        }
    </style>


    <style type="text/css">
    .back-link a {
        color: #4ca340;
        text-decoration: none; 
        border-bottom: 1px #4ca340 solid;
    }
    .back-link a:hover,
    .back-link a:focus {
        color: #408536; 
        text-decoration: none;
        border-bottom: 1px #408536 solid;
    }
    h1 {
        height: 100%;
        /* The html and body elements cannot have any padding or margin. */
        margin: 0;
        font-size: 14px;
        font-family: 'Open Sans', sans-serif;
        font-size: 32px;
        margin-bottom: 3px;
    }
    .entry-header {
        text-align: left;
        margin: 0 auto 50px auto;
        width: 80%;
        max-width: 978px;
        position: relative;
        z-index: 10001;
    }
    #democontent {
        padding-top: 100px;
    }
        .center1 {
        }
    </style>

</head>
<body style="background-color:#5bb4cc">
    <form id="form1" runat="server">


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="js/main.js"></script>


    <div class='center'>

        <br />
        <br />
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
                    <br />
        <br />


                    <asp:Button ID="Button1" runat="server" Font-Bold="True" Font-Size="Medium" Height="46px" OnClick="Button1_Click" Text="شروع کن" Width="194px" />


        <br />



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

    <div class='center1'>

        <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" CrosshairEnabled="True" Height="500px" Width="685px" AppearanceNameSerializable="Dark" PaletteName="Default" style="text-align: center">
        </dxchartsui:WebChartControl>

     </div>
    </form>
</body>
</html>

Answer 1

你应该尝试使用这样的中心标签：

<center>
    <div class="center1">
        <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" CrosshairEnabled="True" Height="500px" Width="500px" AppearanceNameSerializable="Dark">
        </dxchartsui:WebChartControl>
    </div>
</center>

希望这有帮助！

Answer 2

尝试将text-align: center添加到代码中.center1的父代#form1。所以，在css中添加此规则：

body {text-align:center;}
#form1{text-align:center;}

并删除空规则：

.center1 { }

为什么不能将div内容设置为中心？

2 个答案: