I have the following text tag which i cannot change. I want the "test" text to be centered using CSS only.

<text 
  width="13.89" 
  height="13.89" 
  x="291.46999999999997" 
  y="156.55" 
  transform="rotate(0,277.78,142.86)" 
  text-anchor="end" 
  style="fill: rgb(255, 0, 0); font-size: 5pt; display:inline-block; position: relative; top: 50%; left: 50%; transform: translate(50%, -50%);"
>
  test
</text>

Via a javascript function the text gets an x and y on the bottom right center of a rectangle.

I'd like to move this to the middle center of that rectangle, The only thing we can control is the CSS, seeing as every rectangle is the same size i believe something like left -15px and top -15px should do the trick.

Is there any way to achieve this using CSS only?

I have the following text tag which i cannot change. I want the "test" text to be centered using CSS only.

<text 
  width="13.89" 
  height="13.89" 
  x="291.46999999999997" 
  y="156.55" 
  transform="rotate(0,277.78,142.86)" 
  text-anchor="end" 
  style="fill: rgb(255, 0, 0); font-size: 5pt; display:inline-block; position: relative; top: 50%; left: 50%; transform: translate(50%, -50%);"
>
  test
</text>

Via a javascript function the text gets an x and y on the bottom right center of a rectangle.

I'd like to move this to the middle center of that rectangle, The only thing we can control is the CSS, seeing as every rectangle is the same size i believe something like left -15px and top -15px should do the trick.

Is there any way to achieve this using CSS only?

• javascript
• html
• css
• svg

Share Improve this question Follow edited Nov 6, 2018 at 11:38 davnicwil 31.1k2121 gold badges116116 silver badges134134 bronze badges asked Jan 24, 2018 at 15:21 Wouter DumonWouter Dumon 4711 gold badge33 silver badges1010 bronze badges 8

• Not only is text not a valid HTML element, but you need to show the JavaScript you are working with. – Scott Marcus Commented Jan 24, 2018 at 15:23
• In order to move an element there needs to be a position relative/absolute set. I do not see that in the CSS. – epascarello Commented Jan 24, 2018 at 15:23
• 3 Probably an SVG <text> element – Turnip Commented Jan 24, 2018 at 15:23
• "I have the following text tag which i cannot change". In your case the solution seems plicated/dirty if you respect your first statement. Is there really no way you can change this ? – Logar Commented Jan 24, 2018 at 15:25
• Hello, This is indeed an svg element i'm sorry for not mentioning that. the x and y are filled in using the data-bind though we do not have control over this. – Wouter Dumon Commented Jan 24, 2018 at 15:26

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 2

To reposition a <text> element within an <svg> with hardcoded x and y properties, using CSS, you can use transform: translate to offset the element from its hardcoded x,y position.

Examples

/* move 10px left */
.textElementSelector {
  transform: translateX(-10px);
}

/* move 5px down */
.textElementSelector {
  transform: translateY(5px);
}

/* move 10px up and right */
.textElementSelector {
  transform: translate(10px, -10px);
}

I won't ment on how the text tag doesn't exist.

If you want to move it, you need to display it as inline block, in a relative position.

text {
  display: inline-block:
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• inline-block to take only the needed space
• relative to allow the element's placement
• 50% to put the top-left corner of the container at the center of the parent
• translate(-50%, -50%) to put the container at the center of the parent