css中的文本框中心答案

【问题标题】：Textbox center in csscss中的文本框中心
【发布时间】：2016-11-16 06:31:20
【问题描述】：

我可以成功地将 CSS 中的文本框居中。但是居中的文本框没有对齐。如何对齐它们？

我的html代码：

  <div data-bind="dxList: { dataSource: dataSource}">
    <div data-options="dxTemplate : { name: 'item' } ">

        <div class="wrapper">
               <div data-bind="text: name" class="cls"></div>
            <input name="deneme" id="test" type="text"  />
        </div>
    </div>
</div>

现在看起来有点像这样

【问题讨论】：

标签： css html devextreme

【解决方案1】：

注意：使用margin: 0 auto然后水平对齐中心元素或Div

方法一：使用 display: flex;。

#test,
.test {
  margin: 0 auto;
  display: flex;
}

<div class="wrapper">
  <div data-bind="text: name" class="cls"></div>
  <input name="deneme" id="test" type="text" />
</div>

方法二：使用 display: block;

#test,
.test {
  margin: 0 auto;
  display: block;
}

<div class="wrapper">
  <div data-bind="text: name" class="cls"></div>
  <input name="deneme" id="test" type="text" />
</div>

【讨论】：

谢谢，但它不起作用。居中的文本框未对齐。
文本框中心正如您的问题所期望的那样。您想要什么，请简要介绍您的问题
并非所有文本框都对齐。他们只是在中间。你可以看上面的例子。
好的。你想在第二个或其他一些左侧前一个文本框之后的第一个文本框中心？？
是的，你能帮我吗？

【解决方案2】：

试试看：- 要将具有margin: 0 auto; 的 div 居中，就像建议的那样，div 必须包含有效的宽度。

如果你添加

#register{
 //...
 width: 300px;
 margin: 0 auto;
}

这将使您的 div 水平居中。您还可以在父级中使用text-align: center，在表单中使用display: inline-block。如：

#fg_membersite{
 text-align:center;
}

#register{
 display:inline-block;
}

如果你想把它也放在垂直中心，我建议你使用display:table（在aprent div上）和display:table-cell（在包装div中）和vertical-align:middle选项，或者可能是带有负数的position:absolute利润，这是你的选择。

【讨论】：

【解决方案3】：

试试这个css：

input {
   width:100px;
   display:block;
   margin:0 auto
}

【讨论】：