CODEWITHSUNDEEP
htmlcss
Benji Collins
Benji Collins

Reputation: 89

Label is slightly lower than text input

I have a label to the left of a text input but it looks like the text is just slightly below the bottom of the input. Here is my relevant HTML:

  <div id="nickbox">
    <label for="nickname" id="nicklabel">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" size="20" role="textbox"
        aria-label="Enter your nickname." data-lpignore="true" autofocus />
    <input type="button" id="nicknameconfirm" value="Set" />
  </div>

And my CSS:

#nickbox {
  border: none;
  display: inline;
  padding: 5px;
  background-color: #ffffff00;
  align-self:center;
  font-size: 2em;
}
#nickname {
  background-color: #44475a;
  border: none;
  height: 2em;
  width: 20em;
  outline: none;
}

This is what the results look like. What can I do to change this? I assume I need to add some CSS to #nicklabel. Thanks.

Upvotes: 0

Views: 1297

Answers (3)

Behnam akbari
Behnam akbari

Reputation: 51

Use position: sticky; Like here: jsfiddle

#nicklabel{
    top: 13px;
    position: sticky;
}

Upvotes: 0

mdblzk
mdblzk

Reputation: 33

What about this?

#nickbox {
  display: flex; /* Change display on parent */
  border: none;
  padding: 5px;
  background-color: #fff;
  font-size: 2em;
}
#nickname {
  background-color: #44475a;
  border: none;
  height: 2em;
  width: 20em;
  outline: none;
  align-self: center; /* Apply to child */
}

Upvotes: 0

Aldo Maria Landini
Aldo Maria Landini

Reputation: 157

Put vertical-align: middle; into #nickname

#nickname {
  background-color: #44475a;
  vertical-align: middle;
  border: none;
  height: 2em;
  width: 20em;
  outline: none;
}

http://jsfiddle.net/6xqgb0mu/

Upvotes: 1

Related Questions