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

score 2 · Accepted Answer · answered Nov 16 '16 at 06:39

2

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>

answered Nov 16 '16 at 06:39

Sumit patel

3,807
9
34
61

Thank you but it not working. The centered Textboxes are not aligned. – Nov 16 '16 at 08:01
textbox center as expcted your questions. what do you want plz briefly your questions – Sumit patel Nov 16 '16 at 08:02
Not all textboxes are aligned. They are just in the middle. You can see the example above. – Nov 16 '16 at 08:21
ok. you want to first textbox center after second or other some left side previous textbox right ?? – Sumit patel Nov 16 '16 at 09:09
Yes, can you help me pls? – Nov 16 '16 at 09:46
see fiddle https://jsfiddle.net/patelsumit5192/3z6yzf76 check it . any issue or query then put on comment – Sumit patel Nov 16 '16 at 10:07

score 0 · Answer 2 · edited Nov 16 '16 at 07:22

0

try with this css :

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

edited Nov 16 '16 at 07:22

Jishnu V S

8,164
7
27
57

answered Nov 16 '16 at 06:34

vakho papidze

465
3
12

score 0 · Answer 3 · answered Nov 16 '16 at 06:43

Try it:- To center a div with margin: 0 auto; like suggested the div must contain a valid width.

If you add

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

This will center your div in the center horizontally. You can also use text-align: center in the parent with display: inline-block in the form div. Such as:

#fg_membersite{
 text-align:center;
}

#register{
 display:inline-block;
}

If you want to center it also in the vertical i suggest you use display:table (on the aprent div) and display:table-cell (in a wrapper div) and vertical-align:middle options , or maybe a position:absolute with negative margins, it's your choice.

Textbox center in css

3 Answers3