Input list - jak zrobić, aby jej elementy były na środku w podpowiedziach

Hejka, jakiś pomysł jak uzyskać taki efekt, jak na załączonym obrazku?

https://jsfiddle.net/5kd8970f/

Z góry dzięki

Zwyczajowo jest to renderowane przez system operacyjny, więc jest niestylowalne.
Z drugiej strony - nie chcesz tego renderować ręcznie, ponieważ wtedy strona będzie wyglądać nienatywnie na iOSach czy innych systemach.

Rzuć okiem tutaj - https://jsfiddle.net/1wnLbezc/
Nie jest to do końca to, co chciałeś, ale obawiam się, że nie da się wyśrodkować listy rozwijanej. Pewien czas temu był podobny wątek, tylko dotyczył jakiegoś selecta/dropdown'a i tam też była podobna opinia - że nie da się tego w pełni ostylować, za wyświetlanie listy odpowiada nie tylko CSS, ale też sama przeglądarka.

<input list="data" type="text" name="input" value="" class="centruj">
 <datalist id="data">
   <option value="one"></option>
   <option value="two"></option>
</datalist>

.centruj{
  text-align: center;
}

Zobacz ten wątek - to jest ten, o którym wspominałem w poprzednim poście: pole select

Dobra, to zrezygnuje z tego, bo nie jest to jakieś istotne, ale myślałem, że jest jakiś prosty trik na to :P

https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box

Podobnie jest z file input w formularzach, ale są na to sztuczki typu javascript + CSS, żeby ostylować przycisk i parsować tekst z nazwą pliku.