Acabo de hacer este menú desplegable, pero tengo un problema.

Cuando cambio el tamaño de div/h4, el texto va a la parte superior. Intenté arreglar esto con text-align: center; pero no hizo nada.

Aquí hay una imagen de lo que estoy tratando de hacer:

imagen de Imgur

Aquí está el css para ello:

 #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;}

Y la parte HTML, si la necesitas:

 <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>