vertical align not working in div

Question

i am trying to texbox over to button but my case first line texbox then next line in button html:-

 <div class="styled-input" id="surnamediv">
                                <input type="text" id="surName" /><button id="add" class="hidden">Add</button>
                                <label>Surname</label>
                                <span></span>
                            </div>

css:-

.custom-input #surnamediv #add{
        vertical-align:middle;
    }

There's not even a question here. What happened, what you expect to happen? Where is the reproduction? — Lazar Ljubenović, Jun 08 '18 at 07:06
Its coming in one line only for me. Can you replicate it on some fiddle, so that I can look into it — Nandita Sharma, Jun 08 '18 at 07:10
There is no css class called ".custom-input". Did you mean "styled-input"? — Vall0n, Jun 08 '18 at 07:14

Nandita Sharma · Accepted Answer · 2020-01-21T06:47:57.830

4

Try these styles

#surnamediv {
   display: flex;
   align-items: center;
}
#surnamediv label {
    margin-left: 10px;
}

#surnamediv {
  display: flex;
  align-items: center;
}

#surnamediv label {
  margin-left: 10px;
}

<div class="styled-input" id="surnamediv">
  <input type="text" id="surName" /><button id="add" class="hidden">Add</button>
  <label>Surname</label>
  <span></span>
</div>

edited Jan 21 '20 at 06:47

answered Jun 08 '18 at 07:12

Nandita Sharma

13,287
2
22
35

score 0 · Answer 2 · edited Jan 21 '20 at 06:48

0

Vertical-align work with flex

<style>
    .styled-input {
    width:100℅;
    display:flex;
    align-items:center;
    }
</style>

edited Jan 21 '20 at 06:48

Nandita Sharma

13,287
2
22
35

answered Jun 08 '18 at 07:14

Bhautik Chudasama

654
9
25

score 0 · Answer 3 · edited Jan 21 '20 at 06:48

0

#surnamediv {
  display: table;
}

#surnamediv input,
#surnamediv button,
#surnamediv label {
  display: table-cell;
  vertical-align: middle;
}

#surnamediv label {
  padding-left: 10px;
}

<div class="styled-input" id="surnamediv">
  <input type="text" id="surName" /><button id="add" class="hidden">Add</button>
  <label>Surname</label>
  <span></span>
</div>

edited Jan 21 '20 at 06:48

Nandita Sharma

13,287
2
22
35

answered Jun 08 '18 at 07:15

Anubhav pun

1,323
2
8
20

vertical align not working in div

3 Answers3