如何在 Asp.net 网站中居中对齐实际的 TextBox答案

【问题标题】：How to center align the actual TextBox in Asp.net website如何在 Asp.net 网站中居中对齐实际的 TextBox
【发布时间】：2017-12-31 22:49:40
【问题描述】：

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

 <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>

【问题讨论】：

您是要水平居中、垂直居中还是同时居中？
如果您将col-sm-offset-3 添加到您的列div，您是否更接近您想要的？（即<div class='col-sm-6 col-sm-offset-3'>）。这将使该列居中。此外，您的 Bootstrap input-group 组件似乎无效。请阅读有效的标记是here。您在 input-group 中添加了一个 <p>、一些文本（您的标签）和一个 <input />，这可能是无效的（文档说“仅限文本 s”）。
@Eli 横向
@zgood 是的，感谢您的反馈真的很有帮助，我会参考相同的

标签： javascript html css asp.net twitter-bootstrap

【解决方案1】：

试试这个代码。我删除了 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>

【讨论】：

你应该看看Bootstrap column offsets。没有必要创建空的 col-lg-4 列并将所有内容嵌套在 col-lg-12 中，这只是没有价值的额外标记 - 你只是让你的文件变得更大更难阅读 lol
感谢您的建议