Ejemplo de precio:Cómo alinear su superíndice con su texto principal en HTML
Me gustaría utilizar un superíndice en mi precio. Si el precio es de $ 10 y 89 centavos, me gustaría tener los 89 centavos alineados con los $ 10 con superíndice. Al usar <sup> se aplica el superíndice, pero la parte "89" va más allá de lo que me gustaría. Si usted toma un vistazo a la imagen, la parte superior del 89 tendría que estar alineada con la parte superior del 10.
Dar vertical-align: top; a su <sup> etiqueta
<style>
.cents {
font-size: 70%;
position: relative;
bottom: 0.3em;
}
</style>
$100<span class=cents>89</span>
Este funciona de manera más confiable en todos los navegadores que el marcado <sup> o la propiedad vertical-align (consulte longish explanation). Seleccionar el valor bottom (adecuado para el font-size seleccionado) no es una ciencia exacta, ya que la idea es mover el elemento en la misma medida en que se reduce la altura de los dígitos, pero esto requiere algo de experimentación.
Gracias ... Funcionó como un encanto. –
Esta fue la solución perfecta para otro problema de superíndice común: intentar evitar cambiar la altura de la línea y estropear la posición del resto del texto/elementos :-) –
Gracias. Lo probé y funcionó. –
Por lo general, funciona. Pero puede crear problemas con ciertos tipos de letra y fuentes, especialmente cuando utiliza fuentes que no usan la altura completa para representar números. Si sus fuentes, tamaños, etc. no cambian demasiado, esta debería ser una solución lo suficientemente buena. – techfoobar
Si no es estricto con HTML5, puedo darle una solución de navegador múltiple. – techfoobar