css - css中的文本框中心

Question

我可以在 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>

现在看起来有点像

Answer 1

Notes: Using margin: 0 auto then horizontal align center element or 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>