How to center input in HTML CSS

Question

My goal is to vertically center the input in the picture. How can I do that?

.headmenu {
  background-color: rgb(47, 47, 47);
  width: auto;
  height: 30px;
}

.headmenu-right {
  float: right;
  padding-right: 15px;
}

.headmenu-right>input {
  border-radius: 15px;
  padding-left: 5px;
}

<div class="headmenu">
  <div class="headmenu-right">
    <input type="text">
  </div>
</div>

You probably want the "can I use flexbox" solution from here: https://css-tricks.com/centering-css-complete-guide/ — Olex Ponomarenko, Nov 02 '22 at 17:52

score 2 · Accepted Answer · answered Nov 02 '22 at 17:59

Better to use flexbox here:

.headmenu {
    background-color: rgb(47, 47, 47);
    width: auto;
    height: 30px;
    display: flex; 
    align-items: center;
}

.headmenu-right {
    margin-left: auto;
    padding-right: 15px;
}

.headmenu-right>input {
    border-radius: 15px;
    padding-left: 5px;
}

<div class="headmenu">
    <div class="headmenu-right">
        <input type="text">
    </div>
</div>

score 0 · Answer 2 · answered Nov 02 '22 at 17:55

.headmenu {
    background-color: rgb(47, 47, 47);
    width: auto;
    height: 30px;
    display:flex;
    justify-content:end;
    align-items:center;
}

.headmenu-right {
    float: right;
    padding-right: 15px;
}

.headmenu-right>input {
    border-radius: 15px;
    padding-left: 5px;
}

<div class="headmenu">
    <div class="headmenu-right">
        <input type="text">
    </div>
</div>

How to center input in HTML CSS

2 Answers2