Having difficulty aligning text with innerHTML
I am trying to create a link element using JavaScript, but I cannot get the text to align to the center. Here is my code:
a= document.createElement('a');
a.style.cssText= 'font-size: 20px; cursor: pointer; text-align:center;';
a.innerHTML = 'Align ME TO CENTER!';
The default alignment is left and I cannot figure out how to change it. Any suggestions?
Initially, there appears to be an issue with the code provided:
Instead of
var a = document.createElement('a');
a.style.cssText= 'font-size: 20px; cursor: pointer; text-align:center;';
a.innerHTML = 'Align ME TO CENTER!';
You should use:
var a = document.createElement('a');
a.setAttribute('style','font-size: 20px; cursor: pointer; text-align:center;');
a.innerHTML = 'Align ME TO CENTER!';
To address your specific problem, within the style attribute, you must set the display property to block, similar to this:
a.setAttribute('style', 'font-size: 20px; cursor: pointer; text-align: center; display:block;');
Currently, I am able to send one parameter to the controller using the code snippet below in Javascript: <g:javascript> var sel = "test"; <g:remoteFunction action="newExisting" method="GET" update="updateThis" params="'sel='+s ...
Imagine I have the word "IamGreat" hidden within a paragraph on my website, and I wish for it to transform into "Good4you" when hovered over. But here's the catch - instead of the entire word changing at once, I want each letter to switch individually ...
When I click the + drop down button in the HTML below, it doesn't show the inner content as expected. <div style="text-align: center; font-family: 'Chronicle-Display-Roman'; font-size: 16px;">For all sizing information please clic ...
Looking for a similar solution. var item_<?php echo $variable->n ?> = <?php echo '32' ?> Trying to achieve something like this: var item_342 = '32' ...
I'm currently working on adding a dark transparent overlay to the product div whenever someone hovers over the product image. I've successfully created overlays for the entire screen in the past using similar logic, but this time it's behavi ...
I'm currently working on a website project and I'm looking to incorporate a table similar to the one shown in the image. While I am familiar with HTML tables, I'm struggling to recreate this specific layout. Despite my best efforts, I haven& ...
Looking for assistance on aligning the text in the menu located at: 1st tab: I would like a line break after "Item". 2nd and 3rd tabs: I am seeking a line break after "This is". I have only included the section of the menu that requires adjustment, whi ...
I have a list of letters and I want to filter out any values that contain the text entered by the user in a textbox. Here is the design: Search List: <input type="text" id="txtSearch" /> <ul> <li>Coffee1</li> <li>Coffe ...
I came across Goldpage, a tool that allows for route rendering control. Render Control - With Goldpage, you have the flexibility to choose how and when your pages are rendered. For example, one page can be rendered to both HTML and the DOM (classic serv ...
When I try to call this javascript file from jade: -if ... -else div#container script(type='text/javascript') jwplayer('container').setup({ file: '/path/to/file.m3u8', width: '0', hei ...
I am currently developing a shopping list web application where users can toggle items as 'checked' or 'unchecked'. The flow of data in this application is as follows: click on item checkbox --> send database update request --> ...
I am currently working on creating a CSS style that can modify the appearance of a dropdown control to look like a label, while allowing another dropdown on the same page to retain its default appearance. To achieve this, I am using a custom attribute with ...
I encountered a requirement to display stock number suggestions within a search box. To achieve this, I decided to implement the Jquery autocomplete plugin. Through an ajax call to a function in my cfc, I was able to retrieve all the stock numbers and stor ...
I am currently facing an issue with my file submission form and progress bar in JavaScript. The progress bar is interfering with the controller, preventing it from redirecting back home with the link. I have tried removing window.location.href="/"; but thi ...
Having a situation where two components are involved. The first component has an ng-click function that triggers a modal containing the second component. Currently, everything is working smoothly. However, the issue arises when the modal should only open a ...
There seems to be an issue with the height of the dropdown in react-select when used with react-window. Even though there are only two values, the height is larger than the items displayed. How can this be fixed, especially considering that the dropdown va ...
I am working with a grid component from Material UI: Item element const Item = styled(Paper)(({theme}) => ({ ...theme.typography.body2, padding: theme.spacing(2), textAlign: 'center', color: "black", })); Structure ...
I have a function that returns an object where the keys are strings and the values are arrays of strings: {"myType1": ["123"]} What I want to do is merge all the results it's returning. For example, if I have: {"myType1": ["123"]} {"myType2": ["45 ...
I am currently in the process of developing a basic Google map which includes markers and involves looping through the data source for the markers. When I replace key.lng or key.lat with hardcoded values in the code below, everything functions correctly. ...
I have created a game using Phaser, a JavaScript library for games. Now I am looking to implement a score table using JS/PHP. My main focus is on transferring a variable from JS to PHP in order to update the database. I have researched numerous topics and ...