Adjust the horizontal position of a text element using CSS

I am faced with a specific challenge where I need to center the text "test" within a text tag using only CSS, without being able to directly change the HTML.

<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>

Currently, a JavaScript function is utilized to position the text at the bottom right-center of a rectangle. However, I aim to achieve alignment to the middle-center instead. Given that all rectangles are uniform in size, adjusting the CSS properties like 'left' and 'top' by -15px may be a viable solution.

The question remains: Can this repositioning of the text element to the center-center of the rectangle be accomplished solely utilizing CSS?

javascripthtmlcsssvg

Answer №1

If you need to adjust the position of a <text> element inside an <svg> with fixed x and y properties, you can achieve this using CSS. One way is to utilize transform: translate to move the element from its original location defined by the x,y values.

Here are some examples:

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

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

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

Answer №2

I'm not going to delve into the fact that the text tag is non-existent.

If you wish to relocate it, you must present it as an inline block, with a relative position.

text {
  display: inline-block:
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  • inline-block used for precise spacing
  • relative permits the element's positioning
  • 50% places the container's top-left corner at the center of its parent
  • translate(-50%, -50%) centers the container within its parent

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing checkbox behavior using ajax

Currently, I am utilizing a CSS toggle button to display either active or inactive status. This toggle button is achieved by using an HTML checkbox and styling it with CSS to resemble a slide bar toggle. The assigned functionality involves binding the onCl ...

javascriptphpjqueryajaxcheckbox

guiding user immediately to blog post upon successful login

I recently created a blog with a customized URL like instead of the traditional . Now, my dilemma is that I want to share this URL and have it redirect users to the login page if they are not logged in. Once they log in, I would like them to be redirect ...

javascriptphp

The toggling feature seems to be malfunctioning as the div section fails to display

I'm facing an issue with my Django project while working on a template. I want to toggle the visibility of a div element between hiding and showing, but the function I used isn't working for some reason. I borrowed the function from a different t ...

javascripthtmlcssdjango

Choose a random element from a string with Javascript

Could someone please help me figure out why my code isn't functioning as expected? I'm trying to randomly select three names from a list and ensure that no name is repeated. While I believe I am on the right track, something seems to be missing. ...

javascript

URL JSON data will not display markers

I am currently working on a map that fetches data from the police.uk API by allowing users to drag and drop a dot on the map to display crimes within a 1-mile radius. However, I'm facing an issue when trying to implement geocoding functionality by tak ...

javascriptjqueryjsongoogle-mapsgoogle-maps-api-3

Expanding HTML Editor's Functionality in Eclipse with Custom Tags

Creating an application involves incorporating custom tags within HTML code, which are processed on the server side before being presented to the end user as valid HTML. An example of using custom tags is shown below: <html> <body> ... < ...

htmleclipsetags

Using Plotly.js to generate a visually stunning stacked and grouped bar chart

Is there a way to generate a bar chart on Plotly.js that features both grouped and stacked bars? Ideally, I am looking for a structure similar to the one shown here: Barchart with stacked and grouped charts ...

javascriptplotlyplotly.js

The specified element type is not valid: only a string (for built-in components) or a class/function is expected when attempting to display a component

`Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you mi ...

javascriptreactjs

What could be causing my jQuery switch not to function on the second page of a table in my Laravel project?

Having an issue with a button that is supposed to change the status value of a db column. It seems to only work for the first 10 rows in the table and stops functioning on the 2nd page. I'm new and could really use some help with this. Here's the ...

javascriptphpjquerylaravel

What is the best way to maximize vertical space in every element on a page?

How can I achieve a layout similar to the image shown? I want three distinct sections: a navigation bar fixed at the bottom, and left and right sides each taking up 50% of the screen. Additionally, all boxes on the left side should have equal height. I am ...

htmlcssreactjsbootstrap-5

Showing a gallery of images in React

I have a unique situation where I am working on setting a variable to match the import statement that calls for images. Once I have this variable assigned, I want to use it to display the corresponding image. For instance, if my code generates the name &ap ...

javascriptreactjsimage

Challenges Encountered with AngularJS $http Service

How do I pass my data from the http request to the $scope in the MainCtrl? The code below should fetch data from a MySQL Database with an $http-service, but somehow the data provided by the service doesn't go to the controller or gets displayed incor ...

javascriptphpmysqlangularjs

The Autocomplete feature from the @react-google-maps/api component seems to be malfunctioning as it returns

I'm encountering some difficulties with the Autocomplete component in @react-google-maps/api. While Autocomplete is working and displaying options, clicking on an option fills the input box but I'm only getting 'undefined' from the Plac ...

javascriptreactjsgoogle-maps

Top approach for inserting Class instance into a group

I need some guidance on how to approach this issue. I am interested in creating a set of objects similar to the example below: Person P = new Person(); P.Name = 'John'; P.Surname = 'Dough'; var People = []; People.push(P); Can this b ...

javascriptjqueryangularjs

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

htmlcssangularangularjsprimeng

Retrieve the Multer file name and/or file path

Just checking in on everyone's well-being. I'm currently struggling to retrieve the file path or name after uploading it to the folder. Whenever I try console logging req.files.path or req.files.filenames, it always returns undefined. Could someo ...

javascriptnode.jsreactjsexpressmulter

Struggling to extract information from HTML code through Python web scraping techniques

Hello there! I'm currently in the process of extracting dividend history data for a specific stock from a website using web scraping in Python. However, being new to Python, I'm facing some challenges in retrieving the data. Below is a snippet of ...

pythonhtmlcsvweb-scraping

Tips on utilizing setInterval in a Vue component

When defining the timer in each individual my-progress, I use it to update the value of view. However, the console shows that the value of the constant changes while the value of the view remains unchanged. How can I modify the timer to successfully change ...

javascriptvuejs2vue-component

Execute JavaScript function on click event in NextJS

Is it possible to execute a JavaScript function on the client side without using addEventListener? This situation works with addEventListener. MyComponent.js import Script from 'next/script' export default function MyComponent({ props }) { ...

javascriptreactjsnext.jsserver-side-rendering

What is the process for modifying the design of an NPM package?

I may have a silly or incorrect question, but what exactly is the extent of default styling in an NPM package? If I am using an NPM package and wish to adjust the color of one of their elements, how should I go about it? In both my own index.css file and ...

cssreactjsnpm