text - align - div button css
text-align="middle"_only_ en la dirección y? (1)
Puedo usar text-align="middle"
en un elemento de texto para centrar el texto. En realidad, esto solo funciona bien para la dirección x. Para la dirección y utilizo el truco de Ian G en cuestión Alinear texto en SVG .
Pero, ¿qué puedo hacer si quiero centrar un texto en la dirección y, pero quiero alinear a la izquierda el texto en la dirección x? Por ejemplo, tengo un elemento rect
-element y un elemento de text
situado a la derecha de la misma. El texto debe estar alineado verticalmente para que aparezca centrado en relación con el rect. Por lo tanto, uso la propiedad text-align="middle"
. Pero quiero alinear a la izquierda el texto en la dirección x (ya que quiero mostrarlo a la derecha de la rect). Eso no funciona, ya que text-align
siempre aplica los valores de ambos, x
.
En realidad, no estoy muy contento con la alineación vertical de esa manera y preferiría algo más. Pero no encontré una mejor solución todavía. (No puedo usar el atributo de dominant-baseline
, ya que estoy usando Batik, que no lo soporta). Ni siquiera puedo calcularlo, ya que en SVG no tengo forma de consultar el ascenso / descenso / línea base de una fuente.
Los atributos relacionados con la baseline
, como ha descubierto, no son universalmente compatibles (todavía).
Una posible solución es usar un método similar al viejo truco de CSS para el centrado vertical.
Establezca la coord y del texto en el centro vertical del objeto que desea centrar. Luego use dy con un valor de em para ajustar el texto de verdad.
<text x="0" y="100" font-family="Verdana" font-size="20pt" dy="0.35em">Some TEXT</text>
La cantidad de dy
no será 0.5em, como podría pensar, porque el centro visual de la fuente no será exactamente la mitad de la altura. Va a variar de una fuente a otra. Pero una vez que encuentre un buen valor dy
para una fuente en particular, debería funcionar para cualquier tamaño de fuente.
Demostración aquí: http://jsfiddle.net/js88W/1/
Intente cambiar el valor del tamaño de la fuente para confirmar que se mantenga centrado.