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

Enhancing the appearance of an Angular.js application

On the same page, there are two buttons - one for buying and one for selling. It appears that both buttons share the same HTML instance. This creates a problem when trying to style them individually using classes, ids, or other HTML-targeted selectors, as ...

cssangularjs

Resetting the internal state in Material UI React Autocomplete: A step-by-step guide

My objective is to refresh the internal state of Autocomplete, a component in Material-UI. My custom component gets rendered N number of times in each cycle. {branches.map((branch, index) => { return ( <BranchSetting key={ind ...

javascriptreactjsreduxmaterial-ui

Arrange a div beneath another div that is positioned absolutely

Within my code, I have a div with the property of absolute positioning referred to as "abs". Right after this div, there is another div called "footer" which does not have any specified position value assigned to it. Even though I've experimented with ...

htmlcss

Employing aspect.around while actively monitoring for methods invoking one another

Seeking a solution to run specific code around the put() and add() functions for Dojo stores, I encountered an issue with JSON REST stores where add() simply calls put(): add: function(object, options){ options = options || {}; options.overwrite = fal ...

javascriptdojoaspects

The value of a string in jQuery turns undefined once it is used as an argument

Hello there, Currently, I am working on a personal project involving NodeJS and Electron. The project is a basic text editor as of now. However, I am facing an issue when attempting to pass the value of a text-area to a function before saving it to a file ...

javascriptjquerynode.jselectron

tips on locating the next immediate downloadable cell in a table

My table includes cells with colspan and rowspan attributes. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table border=1 id="mytable" > <tr><td>A1</td> <td> A2 < ...

javascriptjqueryhtmldomhtml-table

Excess space located adjacent to primary content on website

When you scroll to the left of the page, next to the main content and outside of the browser width, there is additional space occupied only by the background of the Body CSS. Take a look at the site in action: . @charset "utf-8"; /* Custom CSS Styles * ...

htmlcss

A guide on automating the html5 color picker using input type="color" in selenium webdriver

When interacting with an HTML color input element, a color picker window pops up that prevents viewing the DOM. I am looking for a solution to either select a color and close the window or enter a hex code in the popup's text box. Can anyone provide m ...

javascripthtmlseleniumautomation

Unable to retrieve a return value from an asynchronous waterfall function within a node module

A custom node module that utilizes async waterfall is working properly when run independently, but the AJAX callback does not receive the return value. //Node module var boilerplateFn = function(params){ async.waterfall([ function(callback){ ...

javascriptnode.jsasynchronousexpresspromise

Give Jquery a quick breather

My goal is to have my program pause for 3 seconds before continuing with the rest of the code. I've been researching online, but all I can find are methods that delay specific lines of code, which is not what I need. What I would like to achieve look ...

javascriptjquerysleepbreakpause

A tutorial on utilizing a bundle in webpack based on certain conditions

My project consists of an app.bundle.js (the main app bundle) and two cordova bundles: iosCordova.bundle.js and androidCordova.bundle.js. Depending on whether the user is logging in on an iOS or Android device, I only script src one of them. All the bundle ...

javascripthtmlcordovawebpackwebpack-dev-server

What is the best method for sending a user to a different page when a webhook is triggered by an external API in

In my project using NextJS and the pages router, I encounter a scenario where a user initiates a process through a form that takes approximately 30 seconds to complete. This process is carried out by an external API over which I have no control. Once the p ...

javascriptreactjsnext.jswebhooksreplicate

Troubleshooting problem with Laravel and Vue integration

I have experience working on a Laravel and Vue.js project. Here is the code snippet for the Laravel view: @extends('layouts/app') @section('content') <div id="app"> </div> @endsection And here is the ...

csslaravelvue.js

Transitioning between states in React with animation

In my React application, I have a menu that contains a sub-menu for each item. Whenever an item is clicked, the sub-menu slides in and the title of the menu changes accordingly. To enhance user experience, I aim to animate the title change with a smooth fa ...

javascriptreactjs

Search for data in Mongoose by utilizing a query object that has been obtained from a query string

After extracting and parsing a querystring from a URL, I am able to map it into an object structure like this: { '$and': [ { length: { '$gt': '2' } }, { length: { '$lt': '55555' } } ] } This object is st ...

javascriptexpressmongooseserver-side

Creating a Three-Row Table with Material-UI and React

I am looking to achieve a layout similar to the one shown in the image below: I want to construct a table with three rows, where the third row is positioned below the first and second rows, and the width of the third row is equal to the combined width of t ...

htmlcssreactjsmaterial-ui

Best Practices for Utilizing NPM Modules with TypeScript

I am interested in developing an npm module using TypeScript. Can anyone suggest a best practice guide on how to start? Here are my questions: Node.js does not natively support TypeScript, so what is the recommended way to publish an npm module? Shoul ...

javascriptnode.jstypescriptnpmtypescript1.8

When attempting to establish a connection with MongoClient, the function fails gracefully without generating an error

try { if (!conn) { console.log("Attempting to Connect to Atlas"); conn = await MongoClient.connect(process.env.MONGO_URL, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log("Success ...

javascriptnode.jsmongodblambdamongodb-atlas

When using Array.prototype.map(callback, thisArg), the second parameter is disregarded

Currently, I am developing a small game using Node.js and aiming to offer support for two different languages. To display the translated lists of various game modes along with their descriptions, I have implemented Array.prototype.map(callback, thisArg). ...

javascriptnode.js

Simulating NextJS router triggers using Jest

I've been attempting to simulate NextJS router events using Jest. I came across a useful resource at NextJS router & Jest. The approach outlined there closely resembles mine. Unfortunately, the solution provided in that post is not yielding the d ...

javascriptunit-testingjestjsnext.jsnext-router