Center flex items along the vertical axis

IMAGE

            <div className="d-flex align-items-center">
              <img
                src={member.user_profile_image}
                width="41"
                height="41"
                alt=""
                className="img-radius me-1"
              />
              <h4 className="color-main">{member.user_name}</h4>
            </div>

What I've noticed in the image is that the text is not quite aligned properly. It seems to be a little off center. I attempted to use the align-items-center property within flex to vertically center the text, but it didn't work as expected. Can anyone suggest an alternative method to align the Image with Text vertically?

Here's an example:

Example

Bootstrap: 5.1

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Assigning a class to an HTML element is not achieved by using "className" in JavaScript. Instead, you should use: class=""

<div class="d-flex align-items-center">
<img
 src={member.user_profile_image}
 width="41"
 height="41"
 alt=""
 class="img-radius me-1"
 />
 <h4 class="color-main">{member.user_name}</h4>
</div>

Give this a try and everything should work fine.

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 CSS is not displaying correctly on Safari and Chrome browsers in Mac OS

I'm having trouble with CSS not loading properly on Apple devices for a website I made. Despite maintaining all media query statements and style sheets separately, the display is not correct in MAC OS safari and chrome. However, everything looks fine ...

javascriptjqueryhtmlcsssafari

Adjust the height of a div based on the font size and number of lines

I'm trying to create a function that automatically sets the height of a div by counting lines. I managed to get it partially working, but then it stopped. Can someone please help me with this? function set_height() { var div_obj=document.getEleme ...

javascripthtmlheight

Using TypeScript and Angular to modify CSS properties

I'm trying to figure out how to change the z-index CSS attribute of the <footer> element when the <select> is open in TypeScript (Angular 10). The current z-index value for the footer is set to 9998;, but I want it to be 0;. This adjustmen ...

htmlcssangulartypescriptfunction

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

My current project involves working with Electron, and it consists of three essential files. The first file is index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="styles ...

javascripthtmlcsselectron

Is there a way to change the URL in the address bar without refreshing the page?

Is it possible to update the URL in the address bar without reloading the page? I came across 2 potential solutions: Option 1: Check out this link It involves using window.history.replaceState. But when I tried implementing it in my angularjs projec ...

javascriptangularjshtmlangular-ui-router

Seeking Up/Down Arrows HTML numerical input feature specifically designed for iOS devices

I am having an issue with a number input box on iOS. I am utilizing jquery, kendo mobile, and HTML5 for this particular task. While the number input displays up and down arrows in the Icenium simulator, they are not showing on the iPad. I am seeking a sol ...

ioscsshtmlinputkendo-mobile

Navigating between windows in Selenium with Webdriver - Handling unnamed child windows

Currently, I am conducting acceptance testing using webdriver and codeception. This is a relatively new area for me, so your patience is much appreciated. My current challenge involves switching to a child window that pops up after clicking a button: < ...

phphtmlselenium-webdrivercodeceptionacceptance-testing

How can I show a div beneath a row in an HTML table?

Check out the code snippet below: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <style type="text/cs ...

javascriptjqueryhtml

Making sure the checkbox stays selected in an angular environment

After experimenting with Angular 9 and a custom input, I achieved the following result => https://stackblitz.com/edit/angular-ivy-rgsatp My goal was to prevent users from disabling a radio button that is currently checked. Therefore, I made changes in ...

javascripthtmlangular

Using JavaScript to add a class when hovering over an element

I am trying to customize the ul inside one of my li elements in the nav by adding a class when hovered. However, I am encountering an issue where the menu disappears when I try to click on it after hovering over it. I want to achieve this functionality usi ...

javascriptcsshtmlsass

A guide on applying bold formatting to a specific section of text in React

I have a collection of phrases structured like so: [ { text: "This is a sentence." boldSubstrings: [ { offset: 5, length: 2 } ] } ] My goal is to display each phrase as a line using the following format: ...

javascriptcssreactjs

Using Laravel and Bootstrap v4, you can easily implement a feature that redirects to a specific tab after

I have a webpage featuring 3 tabs. I am trying to set up the page so that it redirects to the same tab that was active before the reload. I assume each tab should append a string to the URL, like #menu1 or #menu2, but I'm having trouble implementing t ...

htmllaravelbootstrap-4tabs

What is the best way to delete HTML classes that were generated by a function?

Currently, I'm immersed in the Etch A Sketch project as part of my journey through The Odin Project. Using DOM manipulation, I successfully created a grid and displayed it on the screen. Now, my aim is to allow users to resize the grid by removing the ...

javascripthtmlcssdom

Unable to disable background color for droppable element

For my project, I am working with two div boxes. My goal is to make it so that when I drag and drop box002 into another div box001, the background color of box001 should change to none. I have attempted to achieve this functionality using jQuery without s ...

javascriptjqueryhtmlcss

Is there a way to prevent HTML rendering with Javascript within a JSP page?

When a user accesses our site from China, we need to block certain assets to optimize the speed of the site. For example, resources from Facebook need to be blocked from loading altogether. The challenge is that this task must be accomplished using JavaSc ...

javascripthtmljsp

Issue with .get() method in jQuery affecting IE7, IE8, and IE9

While testing the sending and receiving of data to a PHP file using jQuery, I encountered an issue with Internet Explorer (I am using IE9, but I also checked on IE8 and IE7). When I click on one of my divs, I send an "ID" to the server and the PHP file re ...

phpjqueryhtml

Creating a for loop using jQuery to append the value of [i] to the string "id" for the element

As a newcomer to programming, my code may not be the best. I am attempting to automate game results (1 / X / 2) based on the input of home and away goals in a form. To achieve this, I need assistance with my jQuery for loop. Here is the current code: for ...

jqueryhtmlasp.net-mvcfor-loop

Dynamic CSS Class Implementation with KnockoutJS

Greetings, I am seeking assistance as I am new to KnockoutJS. I am working with a class named green-bar that I need to activate when two particular states are true. Unfortunately, the solution I came up with below is not functioning correctly, and I'm ...

javascriptcsshtmlmvvmknockout.js

Setting the title of a document in Angular 5 using HTML escaped characters

It seems like a simple problem, but I can't seem to find an easy solution. Currently, I am using the Title service to add titles to my documents and everything is working fine. You can check out the documentation here: https://angular.io/guide/set-doc ...

htmlangulartypescriptangular5

What is the best way to add a darker tint to the background behind my overlay panel in jQuery

After grabbing the panel code from the jQuery Mobile website and integrating it into my file, I am interested in changing the appearance. I want to either darken or blur the background content when the panel is displayed. I attempted to use filter:blur(5px ...

jquerycssjquery-uijquery-mobile