Estoy tratando de hacer que mi sitio se vea más agradable a la vista y la barra desplegable realmente lo estropea, así es como se ve ahora:

jsfiddle

 * { margin: 0; padding: 0; } #report_card { background-color: black; height: 5rem; padding-top: 1rem; } #report_name { display: block; margin: auto; padding: 0.5rem; width: 12rem; text-align: center; }

 <div id="report_card"> <select id="report_name" align="center"> <option>option 1</option> <option>option 2</option> <option>reaaaaaaaaalllllllyyyyyyyyyy long option 3</option> </select> </div>

Esperaba que hubiera una solución que idealmente estaría cerca de cualquiera de estos 2:

1. El menú desplegable está centrado
   

2. El texto desplegable está centrado con puntos suspensivos
   

Pero también estoy abierto a otras sugerencias para hacer que el menú desplegable se vea mejor y, por favor, intente no usar JavaScript a menos que sea absolutamente necesario, el caso ideal sería una solución basada en css.

Editar: tampoco estoy buscando menús desplegables personalizados