Container panel using css

Please share your Html and Code.

It’s my html code:

    <style type="text/css">

    .FirstNameContainer

    {

        float: left;

        text-align: center;

        margin-right: 15px;

        width: 150px;

    }

    .NameContainer

    {

        float: left;

        text-align: center;

        margin-right: 15px;

        width: 150px;

    }

      .LastNameContainer

    {

        float: left;

        text-align: center;

        width: 150px;

    }

    .ButtonContainer

    {

        clear: both;

        padding-top: 15px;

        width: 315px;

        text-align: center;

    }

        .ButtonContainer1

    {

        clear: both;

        padding-top: 30px;

        width: 315px;

        text-align: center;

    }

</style>

        <asp:Panel ID="Panel1" runat="server" Width="600px" BackColor="#CCCCCC">       

<div class="FirstNameContainer">

        <asp:Label ID="Label1" runat="server" Text="FirstName"></asp:Label>

        <asp:TextBox ID="TextBox1" runat="server" Width="150"></asp:TextBox>

    </div>

    <div class="NameContainer">

        <asp:Label ID="Label3" runat="server" Text="Name"></asp:Label>

        <asp:TextBox ID="TextBox3" runat="server" Width="150"></asp:TextBox>

    </div>

    <div class="LastNameContainer">

        <asp:Label ID="Label2" runat="server" Text="LastName"></asp:Label>

        <asp:TextBox ID="TextBox2" runat="server" Width="150"></asp:TextBox>

    </div>

<div class="ButtonContainer">

    <asp:Button ID="Button1" runat="server" Text="Button" />

</div>

<div class="ButtonContainer1">

    <asp:Button ID="Button2" runat="server" Text="Button" />

</div>

</asp:Panel>

I want panel always be in center form. How i can solve this?

Hi,

Please refer below code.

HTML

<div>
    <style type="text/css">
        .FirstNameContainer
        {
            float: left;
            text-align: center;
            margin-right: 15px;
            width: 150px;
        }
            
        .NameContainer
        {
            float: left;
            text-align: center;
            margin-right: 15px;
            width: 150px;
        }
            
        .LastNameContainer
        {
            float: left;
            text-align: center;
            width: 150px;
        }
            
        .ButtonContainer
        {
            clear: both;
            padding-top: 15px;
            padding-bottom: 15px;
            width: 188px;
            text-align: center;
            left: 130px;
            position: relative;
        }
            
        .ButtonContainer1
        {
            clear: both;
            padding-top: 30px;
            width: 115px;
            text-align: center;
        }
        .SecondButton
        {
            float: right;
            left: 58px;
            position: relative;
        }
    </style>
    <asp:Panel ID="Panel1" runat="server" Width="600px" BackColor="#CCCCCC">
        <div class="FirstNameContainer">
            <asp:Label ID="Label1" runat="server" Text="FirstName"></asp:Label>
            <asp:TextBox ID="TextBox1" runat="server" Width="150"></asp:TextBox>
        </div>
        <div class="NameContainer">
            <asp:Label ID="Label3" runat="server" Text="Name"></asp:Label>
            <asp:TextBox ID="TextBox3" runat="server" Width="150"></asp:TextBox>
        </div>
        <div class="LastNameContainer">
            <asp:Label ID="Label2" runat="server" Text="LastName"></asp:Label>
            <asp:TextBox ID="TextBox2" runat="server" Width="150"></asp:TextBox>
        </div>
        <div class="ButtonContainer">
            <asp:Button ID="Button1" runat="server" Text="Button" />
            <asp:Button ID="Button2" runat="server" Text="Button" CssClass="SecondButton" />
        </div>
    </asp:Panel>
</div>

I hope this will help you out.