style div align text svg alignment text-alignment

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.