Javascript 如何在Asp.net网站中居中对齐实际文本框_Javascript_Html_Css_Asp.net_Twitter Bootstrap

Javascript 如何在Asp.net网站中居中对齐实际文本框

javascript html css asp.net twitter-bootstrap

Javascript 如何在Asp.net网站中居中对齐实际文本框,javascript,html,css,asp.net,twitter-bootstrap,Javascript,Html,Css,Asp.net,Twitter Bootstrap,我有以下HTML/ASP代码，我想将文本框置于显示页面的中心。我在下面附上我的代码。最好我想看到标签旁边的文本框，一旦它在中心 <center> <div class="container" id="TextBox4" runat="server" width="181px" bordercolor="Black" borderstyle="Solid"> <div class="row"> <div class='col-

我有以下HTML/ASP代码，我想将文本框置于显示页面的中心。我在下面附上我的代码。最好我想看到标签旁边的文本框，一旦它在中心

 <center>  <div class="container"  id="TextBox4" runat="server" width="181px"   bordercolor="Black" borderstyle="Solid">
    <div class="row">
      <div class='col-sm-6'>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker1'>
         <p style="color: #000000; font-weight: bold; "> START DATE AND TIME&nbsp;&nbsp;&nbsp; <asp:TextBox ID="Tb4" runat="server" CssClass="form-control" Width="374px" style="text-align: center">
            </asp:TextBox></p>   
            <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
      <script type="text/javascript">
          $(function () {
              $('#datetimepicker1').datetimepicker();
          });
      </script>
    </div>
  </div></center>


开始日期和时间

$（函数（）{
$（'#datetimepicker1'）。datetimepicker（）；
});

试试这段代码。我删除id=Tb4宽度并添加一些类

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">

        <div class="container" id="TextBox4" runat="server" width="181px" bordercolor="Black" borderstyle="Solid">
            <div class="row">
                <div class='col-lg-12'>
                    <div class="row">
                        <div class="form-group">
                        <div class="col-lg-4">
                             &nbsp;
                        </div>
                        <div class="col-lg-4">
                            <div class='input-group date' id='datetimepicker1'>
                                <div class="text-center">

                                      <p style="color: #000000; font-weight: bold;">
                                    START DATE AND TIME&nbsp;&nbsp;&nbsp;
                                          <asp:TextBox ID="Tb4" runat="server" CssClass="form-control"  Style="text-align: center">
                                </asp:TextBox>
                                </p>
                                </div>


                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                        <div class="col-lg-4">
                             &nbsp;
                        </div>

                    </div>

                    </div>

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

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



开始日期和时间

试试这段代码。我删除id=Tb4宽度并添加一些类

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">

        <div class="container" id="TextBox4" runat="server" width="181px" bordercolor="Black" borderstyle="Solid">
            <div class="row">
                <div class='col-lg-12'>
                    <div class="row">
                        <div class="form-group">
                        <div class="col-lg-4">
                             &nbsp;
                        </div>
                        <div class="col-lg-4">
                            <div class='input-group date' id='datetimepicker1'>
                                <div class="text-center">

                                      <p style="color: #000000; font-weight: bold;">
                                    START DATE AND TIME&nbsp;&nbsp;&nbsp;
                                          <asp:TextBox ID="Tb4" runat="server" CssClass="form-control"  Style="text-align: center">
                                </asp:TextBox>
                                </p>
                                </div>


                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                        <div class="col-lg-4">
                             &nbsp;
                        </div>

                    </div>

                    </div>

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

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



开始日期和时间

您是在尝试水平居中对齐、垂直居中对齐还是两者都居中对齐？如果将

col-sm-offset-3

添加到列div中，是否会更接近您想要的位置？（即

）。这将使该柱居中。此外，引导

输入组组件似乎无效。请阅读有效标记是什么。您在输入组中添加了一个
、一些文本（您的标签）和一个
，这可能是无效的（文档称为“仅文本s”）。@EliHorizontally@zgood是的，谢谢你的反馈，真的很有帮助。我会参考你尝试水平、垂直居中对齐的同一件物品，或者两者都有？如果在列div中添加col-sm-offset-3
，是否会更接近您想要的内容？（即
）。这将使该柱居中。此外，引导输入组组件似乎无效。请阅读有效标记是什么。您在输入组中添加了一个
、一些文本（您的标签）和一个
，这可能是无效的（文档称为“仅文本s”）。@EliHorizontally@zgood是的，谢谢你的反馈，真的很有帮助。我会参考你应该看的内容。没有必要创建空的col-lg-4
列并将所有内容嵌套在col-lg-12
中，这只是额外的标记，没有任何价值-您只是使文件大小更大，更难阅读。谢谢您的建议。没有必要创建空的col-lg-4
列并将所有内容嵌套在col-lg-12
中，这只是额外的标记，没有任何价值-您只是使文件大小更大，更难阅读。谢谢您的建议