Textbox center in css

Question

I can successfully center textbox in CSS. But the centered Textboxes are not aligned. How do I align them?

My html code:

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

Looks somewhat like this right now

Answer 1

Notes: Using margin: 0 auto then horizontal align center element or Div

Method-1: Using 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>

Method-2: Using 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>