css centrar - Quiero alinear verticalmente el texto en el cuadro de selección




menu imagen (13)

Esto ahora se ha solucionado en Firefox Nightly y estará en la próxima versión de Firefox.

Consulte este error para obtener más información https://bugzilla.mozilla.org/show_bug.cgi?id=610733

Quiero alinear verticalmente el texto en el cuadro de selección. Intenté usar

select{
   verticle-align:middle;
}

sin embargo, no funciona en ningún navegador. Chrome parece alinear el texto en el cuadro de selección al centro como predeterminado. FF lo alinea en la parte superior e IE lo alinea en la parte inferior. ¿Hay alguna forma de lograr esto? Estoy usando el widget Seleccionar de GWT en UIBinder.

Esto es lo que tengo actualmente:

select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

¡Gracias!


Acabo de tener este problema, pero para dispositivos móviles, principalmente para dispositivos móviles de Firefox . El truco para mí fue definir la altura , el relleno , la altura de la línea y finalmente el tamaño de la caja , todo en el elemento seleccionado. No use sus números de ejemplo aquí, sino por el bien de un ejemplo:

padding: 20px;
height: 60px;
line-height: 1;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: padding-box;

puedes dar :

select{
   position:absolute;
   top:50%;
   transform: translateY(-50%);
}

y para ser padre tienes que dar posición: relativo. funcionará.


Su mejor opción probablemente sea ajustar el relleno superior y comparar en todos los navegadores. No es perfecto, pero creo que es lo más cerca que puedes llegar.

padding-top:4px;

La cantidad de relleno que necesita dependerá del tamaño de la fuente.

Consejo: Si su fuente está configurada en px , configure también el relleno en px . Si su fuente está configurada en em , configure también el relleno en em .

EDITAR

Estas son las opciones que creo que tiene, ya que vertical-align no es consistente en todos los navegadores.

A. Elimine el atributo de altura y permita que el navegador lo maneje. Esto generalmente funciona mejor para mí.

 <style>
    select{
        border: 1px solid #ABADB3;
        margin: 0;
        padding: auto 0;
        font-size:14px;
    }
    </style>
    <select>
        <option>option 1</option>
        <option>number 2</option>
    </select>

B. Agregue relleno superior para presionar hacia abajo el texto. (Empujado por la flecha en algunos navegadores)

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 4px 0 0 0;
    font-size:14px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

C. Puede agrandar la fuente para intentar hacer coincidir la altura de selección un poco más.

<style>
select{
    height: 28px !important;
    border: 1px solid #ABADB3;
    margin: 0;
    padding: 0 0 0 0;
    font-size:17px;
}
</style>
<select>
    <option>option 1</option>
    <option>number 2</option>
</select>

Descubrí que solo agregando un padding-top clic en el cuadro de la flecha desplegable gris a la derecha, lo cual era indeseable.

El método que funcionó para mí fue ingresar al inspector y agregar incrementos de padding hasta que el texto se centró. Esto también reducirá el tamaño del ícono desplegable, pero también estará centrado, por lo que no es tan perturbador para la vista.


Lo intenté siguiendo y funcionó para mí:

select {
     line-height:normal;
     padding:3px;
} 

Solía ​​usar height y height line-height con los mismos valores, pero resultó ser inconsistente a través de las interwebs. Mi enfoque actual es mezclar eso con relleno como tal.

select {
  font-size:14px;
  height:18px;
  line-height:18px;
  padding:5px 0;
  width:200px;
  text-align:center;
}

También puede usar padding para el valor horizontal en lugar del width + text-align


Descubrí que simplemente establecer la altura y la altura de la línea en la misma cantidad de píxeles producía el resultado más consistente. Por "más consistente" me refiero a una coherencia óptima, pero, por supuesto, no es 100% "perfecto como un píxel" para los navegadores. Además, encontré que Firefox (v. 17.x) tiende a aglomerar el texto de la opción a la derecha en contra de la flecha desplegable; Alivié esto con una pequeña cantidad de relleno ajustado a la derecha en el elemento OPCIÓN solamente. Esta configuración no afecta la apariencia en IE 7-9.

Mi resultado:

select, option {
    font-size:10px;
    height:19px;
    line-height: 19px;
    padding:0;
    margin:0;
}

option {
    padding-right:6px; /* Firefox */
}

NOTA - mi elemento SELECT usa una fuente más pequeña, 10px. Obviamente, deberá ajustar las proporciones de acuerdo con su contexto de IU específico.


He tenido el mismo problema y he estado trabajando en él durante horas. Finalmente he encontrado algo que funciona.

Básicamente, nada de lo que probé funcionaba en todas las situaciones hasta que coloqué un div para replicar el texto de la primera opción sobre el cuadro de selección y dejé la primera opción real en blanco. Usé {pointer-events: none;} para permitirles a los usuarios hacer clic en div.

HTML

    <div class='custom-select-container'>
      <select>
        <option></option>
        <option>option 1</option>
        <option>option 2</option>
      </select>
      <div class='custom-select'>
        Select an option
      </div>
    <div>

CSS

.custom-select{position:absolute; left:28px; top:10px; z-index:1; display:block; pointer-events:none;}

Me encontré con este conjunto de propiedades CSS que parecen alinear verticalmente el texto en elementos seleccionados de tamaño en Firefox:

select
{
    box-sizing: content-box;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
}

Si algo, sin embargo, empuja el texto aún más lejos en IE8. Si configuro la propiedad de tamaño de caja de nuevo en border-box, al menos no empeora IE8 (y FF aún aplica la propiedad -moz-box-sizing). Sería bueno encontrar una solución para IE, pero no estoy conteniendo la respiración.

Editar: Nix esto. No funciona después de la prueba. Sin embargo, para cualquiera que esté interesado, el problema parece provenir de los estilos incorporados en el archivo forms.css de FF que afecta a los elementos de entrada y selección. La propiedad en cuestión es la altura de la línea: normal! Importante . No puede ser anulado. He intentado. Descubrí que si borraba la propiedad incorporada en Firebug obtengo un elemento de selección con texto razonablemente centrado verticalmente.


Hasta ahora, esto está funcionando bien para mí:

line-height: 100%;

La solución general más cercana que conozco usa la propiedad box-align, como se describe here . El ejemplo de trabajo está here (puedo probarlo solo en Chrome, creo que también es equivalente para otros navegadores).

CSS:

select{
  display:-webkit-box;
  display:-moz-box;
  display:box;
  height: 30px;;
}
select:nth-child(1){
  -webkit-box-align:start;
  -moz-box-align:start;
  box-align:start;
}
select:nth-child(2){
  -webkit-box-align:center;
  -moz-box-align:center;
  box-align:center;
}
select:nth-child(3){
  -webkit-box-align:end;
  -moz-box-align:end;
  box-align:end;
}

Para aquellos que aterrizaron en esta publicación y están interesados ​​en una solución más moderna, y que no tienen la necesidad de admitir navegadores heredados, puede hacer esto:

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: auto;
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Aquí hay una pluma: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e





css gwt select vertical-alignment