I just made this dropdown, but I have a problem.

When I resize the div/h4, the text goes to the top. I tried fixing this with text-align: center; but it did nothing.

Here's an image of what I'm trying to do:

Imgur image

Here's the css for it:

#alue_search {
  box-sizing: border-box;
  background-image: url('https://cbot.me/images/alue_icon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  /*border-bottom: 3px solid #ddd;*/
  color: #353535;
  border-radius: 5px 5px 0px 0px;
}

#alue_search:focus {
  outline: none;
}

.dropdown {
  display: inline-block;
  position: relative;
  background-color: #f6f6f6;
  min-width: 230px;
  z-index: 1;
  border-radius: 5px;
  border: 3px solid #ddd;
}

.dropdown-content {
  position: relative;
  z-index: 1;
}

.dropdown-content h4 {
  height: 35px;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  color: #353535;
  transition: all 0.3s ease-in-out;
  display: none;
}

.dropdown-content h4:hover {
  background-color: #ddd;
  cursor: pointer;
}

.dropdown-content div {
  height: auto;
}

.show {display:block;}

And the HTML part of it, if you need it:

<div class="dropdown">
      <div id="myDropdown" class="dropdown-content">
        <input type="text" placeholder="Etsi alue" id="alue_search" onkeyup="filterFunction()">
        <div onclick="select('Helsinki')"><h4>Helsinki</h4></div>
        <div onclick="select('Jyväskylä')"><h4>Jyväskylä</h4></div>
        <div onclick="select('Kuopio')"><h4>Kuopio</h4></div>
      </div>
</div>