When the text is lengthy, the button shifts its position

After creating two buttons, one with short text and the other with long text, I noticed that they are not aligned properly.

Is there a way to align the second button even when the text is long?

https://jsfiddle.net/ws2awc03/


var btn = document.createElement("button");
var btn2 = document.createElement("button");
var body = document.getElementsByTagName("body")[0];

btn.style.width = "200px";
btn.style.height = "150px";
btn.style.margin = "10px";
btn.innerHTML = "text";
body.appendChild(btn);

btn2.style.width = "200px";
btn2.style.height = "150px";
btn.style.margin = "10px";
btn2.innerHTML = "text text text text text text text text text text text text text";
body.appendChild(btn2);

*Please note that this example only includes two buttons, but in reality, there may be a 10x7 matrix of buttons.

Answer №1

To center the content vertically, you need to adjust the vertical alignment:

button {
  vertical-align:middle;
}

Example Code Snippet

By default, inline elements have a vertical alignment of baseline, as you observed.

Answer №2

There was an error in setting the margin for button 2: btn.style.margin = "10px";.
To control the appearance of the container element, such as body, you can use body.style.display = "flex";.

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

Difficulty with Vue Router horizontal scrolling to hash functionality

My goal is to achieve horizontal scrolling of the viewport by using a button wrapped in a router-link that navigates to a vue component. I was successful in achieving this functionality using anchor tags: <a href="#about"> <button cl ...

Encountered an import error when using "npm run build", but it runs successfully with "npm start"

My React app is running smoothly with npm start, but I encounter an error when trying to build it using npm run build. The error message I receive is: `Creating an optimized production build... Failed to compile. Attempted import error: './parseq-lan ...

Using Vue.js to bind data in two directions by using an object with v-for

I can't seem to get input data properly bound to object properties. When I try to iterate through an object to create input fields based on its attributes, the v-model data binding doesn't seem to be working as expected. Even with the code below, ...

Using `useState` within a `while` loop can result in

I'm working on creating a Blackjack game using React. In the game, a bot starts with 2 cards. When the user stands and the bot's card value is less than 17, it should draw an additional card. However, this leads to an infinite loop in my code: ...

Step-by-Step Guide on Resetting Versions in Package.json

I currently have around 20 react projects, each with their own package.json files. These package.json files contain various packages and their versions: "@material-ui/core": "4.11.4", "@material-ui/icons": "4.11.2", ...

Having trouble loading items in a <select> tag with Jquery?

Dealing with a seemingly simple issue, I am struggling to figure out how to load items into a select using jQuery. Working with the Materialize theme available at: The code snippet in question: <div class="input-field col s12"> <s ...

Element within container div being forced out of view (off-screen)

I'm in the process of developing a responsive website and my goal is to keep all my divs centered at all times. However, I've encountered an issue where using the flex attribute in my container causes the bootstrap cards to go offscreen. Can any ...

Three.js: It seems that THREE.WebGLRenderer detected the image is not a power of two, originally sized at 1600x900. It was resized to 102

As I dive into learning three.js, one of my goals is to incorporate a 16x9 photo into my scene. Below is the snippet of code where I add an Array of images to my scene: const material = new MeshBasicMaterial({ map: loader.load(images[i]), trans ...

Initiate a Material-UI CSS animation when the element comes into the viewport

After conducting some research on CSS animation triggers when an element comes into view, I came across this solution that utilizes the IntersectionObserver and element.classList.add('.some-class-name') While this method is demonstrated in pure ...

The div's width shifts upon reaching the top of the page

Creating a blog site example and trying to lock the position of a div once it reaches the top of the page. Utilizing materialize.css for this task. <div class="row"> <div class="col m8 s12"> <!-- content goes here --> < ...

Exploring alternative methods for accessing object values in TypeScript using a string object path without relying on the eval function

If we have an object in JS/typescript structured like this: var obj = { a: { b:{ c:1 } } } And a string "b.c" is given, how can we evaluate this using only the variables provided and retrieve the value 1 from the object without rel ...

The tooltip malfunctions when I incorporate the PHP variable

When I use PHP variables to return an HTML span tag, I am encountering an issue. The span tag contains a title field where I bind my PHP data. However, it seems to only accept the first sentence of my PHP value, causing it to not work properly. Below is th ...

Confusion arises from the code for processing an Ajax redirect

I finally succeeded in incorporating an Ajax call into my code, but I'm a bit puzzled about how to redirect after the call is made. Below is an example of my script, developed using CodeIgniter: <script type="text/javascript"> function myFunc ...

Three.js: dividing the camera's view frustum (similar to what is done in Cascade Shadow Mapping)

Discovering the intriguing world of Cascade Shadow Mapping has been quite insightful (check out this helpful tutorial I stumbled upon: link). I'm currently exploring how to implement a similar approach in Three.js, with the added advantage of having t ...

What is the reason behind Material UI's decision to utilize display flex instead of display grid?

The Grid component implements the grid system. It leverages the Flexbox module in CSS to provide great flexibility. What is the reason behind material UI using display flex instead of display grid? ...

Running Jest encounters errors when there is ES6 syntax present in the node modules of a create-react-app project

Currently, I am working on a project using create-react-app and attempting to perform unit testing on a component from office-ui-fabric-react using Jest and Enzyme. The most recent version of office-ui-fabric-react utilizes es6 syntax which is causing iss ...

What is the best way to incorporate the output of an API into a CSS container?

How can I integrate the API field value result into the CSS container? Your guidance on how to proceed would be greatly appreciated. Hope you have a wonderful day! head <style> .container { background-color:#fff; border-radius:20px; padding:100px ...

What causes the Number() function to increase the value of a number when the number's length exceeds 15 characters?

Every time I execute this code, the number that is returned seems to increase. Can someone please clarify why this happens? let numbers = [8, 5, 4, 9, 7, 6, 0, 2, 3, 1, 9, 7, 4] return Number(numbers.join('')) Result: 8549760231974 ...

Troubleshooting Issue with Bootstrap Button Group Failing to Properly De-Select Dynamically Appended Buttons

My experience with a Bootstrap 5 button group is that the code appears as shown below: <div class="btn-group d-flex justify-content-between m-4"> <input id="a" type="radio" class="btn-check" name="btn ...

Unable to redirect page in Codeigniter after submitting button

I am facing an issue with inserting and updating data in my database using Ajax to my controller. Despite the data being inserted and updated accurately after clicking the button, the changes are not reflected on my view page until I manually refresh it. A ...