Aligning text input with the submit button

Question

How would this be done?

Code: https://jsfiddle.net/6q352ysx/59/

They are both the same height, but they are uneven.

Which of these would get:

vertical-align: top;

vertical-align: bottom;

or would I use it on only one of them?

That, or would I be using

vertical-align: middle;

input[type=text] {
  font-size: 22px;
  width: 200px;
  color: #0059dd;
  background: #000000;
  border: 1px solid #0059dd;
}

input[type=submit] {
  font-size: 22px;
  color: #0059dd;
  cursor: pointer;
  height: 31px;
  background: black;
  border: 1px solid #0059dd;
  font-family: "Times New Roman", Times, serif;
}

<div class="info">
  <input id="input" type="text" name="someNameHere" placeholder="someValueHere" />
  <input id="sent" type="submit" value="Set" />
</div>

I did that here and it messed it up: https://jsfiddle.net/6q352ysx/22/ — Eve Ninnall, Jan 06 '19 at 04:13
You should use flex property on `.info` since flex is capable of solving these kinds of issues where maybe some child element is not filling up the space as it is supposed to. here's a good explanation: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#post-21059 — Feelsbadman, Jan 06 '19 at 04:19
What if I used vertical-align: bottom; instead? https://jsfiddle.net/6q352ysx/27/ — Eve Ninnall, Jan 06 '19 at 04:20
I noticed you have `margin-top:30px;` on the input. You should remove that and add it to `.info` instead. — Feelsbadman, Jan 06 '19 at 04:24
How come after I did that, it's not doing anything? It's not working in the code, how come? https://jsfiddle.net/6q352ysx/31/ — Eve Ninnall, Jan 06 '19 at 04:30
because you still have `display:table-cell` on `.info` you should have `display:flex;` instead. — Feelsbadman, Jan 06 '19 at 04:33
What if I used table instead? display: table; https://jsfiddle.net/6q352ysx/37/ — Eve Ninnall, Jan 06 '19 at 04:37
Read this answer (why it should be flex instead of table ): https://stackoverflow.com/a/18419722/6212957 — Feelsbadman, Jan 06 '19 at 04:40
Before flex added: https://jsfiddle.net/6q352ysx/37/ / after flex added https://jsfiddle.net/6q352ysx/39/ — Eve Ninnall, Jan 06 '19 at 04:42
yes, you'll need to have margin `.info * { margin-left:2.5px; }` — Feelsbadman, Jan 06 '19 at 04:46
What if I removed display from .info, maybe it's not needed? What do you think? https://jsfiddle.net/6q352ysx/53/ — Eve Ninnall, Jan 06 '19 at 04:49
in that case you will have to deal with vertical alignment issues — Feelsbadman, Jan 06 '19 at 04:52

Kilmazing · Answer 1 · 2019-01-06T03:43:47.533

0

Try this CSS:

.info {display:flex}

input[type=text] {
  font-size: 22px;
  width: 200px;
  color: #0059dd;
  background: #000000;
  border: 1px solid #0059dd;
}

input[type=submit] {
  font-size: 22px;
  color: #0059dd;
  cursor: pointer;
  background: black;
  border: 1px solid #0059dd;
  font-family: "Times New Roman", Times, serif;
}

Fiddle: https://jsfiddle.net/6q352ysx/11/

edited Jan 06 '19 at 03:43

answered Jan 06 '19 at 03:29

Kilmazing

526
7
14

You should give an explanation to why flexbox works in this case. – Feelsbadman Jan 06 '19 at 04:19

Aligning text input with the submit button

1 Answers1