Changing the position of an element in CSS using the center as the reference point, based on a JavaScript variable: How can it be done?

I have an image marking a scale, with the marker's position in HTML set as:

<image class="red-marker" xlink:href="./assets/images/marker.png"
[attr.x]=percentage width="12" height="40" y="0" ></image>

But I want the middle of the marker to be at that position, currently its left side aligns with it. Here is a visual representation:

Marker's position when 'percentage' is 100%: Is there a way in HTML, CSS or Javascript to achieve this by:

  • Setting the image origin to the horizontal middle

  • Using CSS's calc() on X position along with an unknown Javascript variable
  • Applying position inside Javascript and referring to a variable there.

Any suggestions?

javascriptcssimagealignment

Answer №1

(Updated) You have the option to include transform: translateX(-50%) in the CSS code for the image. This will shift it to the left by half of its width.

div {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  margin-left: 200px;
}

img {
  transform: translateX(-50%);
}
<div><img src="http://placehold.it/100x50/fa0"></div>

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

The Art of Positioning Containers in CSS

I am facing some issues with my CSS. In the JSP webpage, I have a container styled with a div that works perfectly. However, when I insert another div tag to style certain elements, those elements end up outside of the container for some reason. Below is ...

htmlcssjsp

execute action after a specific point in time in the video is reached

How can I hide a div after a video has been playing for a certain amount of time? The code provided below seems like it should work in theory, but is currently not doing so. Any suggestions on how to fix this issue would be greatly appreciated! <body ...

javascripthtmlif-statementcurrent-time

The React component designed to consistently render video frames onto a canvas is unfortunately incompatible with iOS devices

I'm facing an issue with my code snippet that is supposed to draw video frames on a canvas every 42 milliseconds. It's working perfectly on all platforms and browsers except for iOS. The video frames seem unable to be drawn on canvas in any brows ...

javascripthtmliosreactjshtml5-canvas

My simple application is experiencing a problem where ComponentDidMount is not being invoked

I used a tool called create-react-app to build this simple application. Strangely, the ComponentDidMount method is never getting invoked. import React, { Component } from "react"; class App extends Component { componentDidMount() { console.log("M ...

javascriptreactjslifecycle

Prevent excessive clicking on a div element

I am facing a simple issue that I haven't been able to resolve yet. I want to prevent multiple clicks on a button before an AJAX call is complete. This is what I have tried so far: <button id="btn_pay"></button> $("#btn_pay").click( fun ...

javascriptjqueryajax

Achieving equal height rows in Bootstrap to fill the page height

I'm facing a challenge with my code that consists of 8 bootstrap row elements. I want these rows to have equal height so that when combined, their height is equal to the screen height. Additionally, I need all the rows to be visible without any scroll ...

htmlcssbootstrap-5

Having difficulty accessing information from the parent scope

As I continue to dive into AngularJS, I've encountered some challenges with scopes in my current project. Here is my controller and directive setup: angular.module('myModule', []) .controller('myController', ['$scope', ...

javascriptangularjs

Enhancing leaflet popup functionality by incorporating ng-click into the onEachFeature function

After creating a map and connecting it with my geojson api, I encountered an issue when trying to link each marker popup with ng-click. Simply adding HTML like this did not work as expected: layer.bindPopup("<button ng-click='()'>+feature. ...

javascriptangularjsleafletangular-leaflet-directive

How to implement pagination for JSON response data

I am currently developing an application that requires making a call to a URL in order to retrieve a JSON response. To handle the large amount of data received, I am utilizing Handlebars.js to create list items and then appending them to a unordered list ( ...

javascriptjqueryjsonhtmlhandlebars.js

Extract specific elements from an array using Mongoose's $slice operator while still maintaining the

Currently, my task is to retrieve the total number of items in my News object and return a portion of those items as objects. While I have successfully implemented the $slice operator in my query, I am struggling to determine the original array size of the ...

javascriptnode.jsmongodbmongoose

Ways to automatically update ng-class based on changes in ng-model value

I am working on a code where I need to add classes to the 'label' based on whether the input box is empty or not. To achieve this, I am checking if the input box is null and adding classes accordingly. <div class="col-md-12"> <input ...

javascriptangularjs

An error has occurred in the Next.js App: createContext function is not defined

While developing a Next.js application, I keep encountering the same error message TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function every time I try to run my app using npm run dev. This issue arises when attempting to co ...

javascriptreactjstypescriptnext.jsradix-ui

Conceal the Angular Bootstrap modal instead of shutting it down

I am utilizing Angular Bootstrap Modal to launch multiple modals, including a video player. http://angular-ui.github.io/bootstrap/#/modal My goal is to maintain the video's current position even when the modal is closed. This way, when I reopen the ...

javascriptcssangularjstwitter-bootstrap

Extracting information from a database (HTML, JavaScript)

I am currently working on a table that receives data from the server using ajax: $.each(data, function(i, item) { $('#MyTable tbody').append("<tr>" +"<td>" +data[i].A+ "</td><td>" +d ...

javascriptjqueryhtmlajaxjson

Encountering a frustrating Npm error while trying to install a package, which persists in throwing

Encountering an error message while trying to run npm install npm ERR! Windows_NT 6.3.9600 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\ node_modules\&bsol ...

javascriptnode.jsreactjsnpmwebpack

Remove text on the canvas without affecting the image

Is there a way to remove text from my canvas element without losing the background image of the canvas? I'm considering saving the Image source and reapplying it to the Canvas Element after using clearRect, but I'm unsure how to execute this sol ...

javascripthtmlcanvas

Using the :not selector with links: a guide

I implemented a hover effect for the links on my website. However, I want this effect to be applied to every link except those within a specific div. Sample HTML <div id="menu"> <div class="menu_item"> <a href="index.html" title="Home" tar ...

csscss-selectors

Using Vue.js and axios to manipulate injected HTML content

I am currently working on a project using vue.js and axios to fetch the latest post content from a specific category of a WordPress site using REST API. The post content is always in the form of an ordered list (OL) which will then be displayed as a carous ...

javascriptajaxvue.jsaxios

Disorderly arrangement of HTML elements

I'm facing some issues with the page layout as I have to use a combination of tables and divs. The main problem arises with the footer and the div containing the table. Despite the fact that the footer is the last element inside the "main_container" i ...

htmlcssout

The same HTML/CSS appears with varying appearances

I have encountered an issue where I created two identical pages, with one page calling the other through a link. Surprisingly, my top menubar changes significantly between the two pages, even though the HTML/CSS code is exactly the same. <html> < ...

htmlcssview