Achieving Vertical Alignment of Text and Icon in the Same Line Using HTML and CSS

I am struggling to align these icons vertically center with the text. However, there seems to be a slight offset of a few pixels. I have experimented with different solutions, but this is the closest I could get to. Can anyone explain why it's not aligning perfectly?

HTML

<div class="listItem">
  <div class="listItem__pre">
    <span class="icon icon--account-logout"></span>
  </div>

  <div class="listItem__content">
    <p>Max Muster</p>
  </div>

  <div class="listItem__post">
    <span class="icon icon--account-logout"></span>
  </div>
</div>

CSS

.listItem {
  display: flex;
  list-style: none;
  margin-bottom: 1rem;
}

.listItem__content {
  flex-grow: 1;

  > * {
    width: fit-content;
    margin: 0;
  }
}

.listItem__pre {
  margin-right: 0.8rem;
  align-self: center;
}

.listItem__post {
  margin-left: 0.8rem;
  align-self: center;
}

Result:

htmlcssuser-interface

Answer №1

.listItem {
  display: flex;
  list-style: none;
  margin-bottom: 1rem;
  align-items: center
}

To the CSS of the listItem class, include this option: align-items: center

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

Developing an if-else statement to showcase a different div depending on the URL

Having trouble with an if/else statement to display one div or another based on the URL: No matter what I try, only "Div 1" keeps showing. Here's my code snippet: <script> if (window.location.href.indexOf("pink") > -1) { document.getElemen ...

javascripthtmlif-statement

Troubleshooting: Vue.js Component template not displaying items with v-for loop

I recently implemented a method that calls an AJAX request to my API and the response that it returns is being assigned to an array. In the template section, I am using the v-for directive to display the data. Surprisingly, it only renders once after I mak ...

javascripthtmlvue.jsvuejs2vue-component

A stateless component in React must always return a valid React element or null

I am a beginner with ReactJS and I am facing an issue. My goal is to showcase Hello world using the code snippet provided below, however, I keep encountering this error message: Can someone guide me on what I might be overlooking? The following is the c ...

javascripthtmlreactjsecmascript-6jsx

Encountered an issue during my initial AJAX call

Hello everyone, I am currently attempting to use AJAX to send a request with a button trigger and display the response HTML file in a span area. However, I am encountering some issues and need help troubleshooting. Here is my code snippet: //ajax.php < ...

javascriptphpjqueryhtmlajax

Use jQuery to calculate the width of the wrapper and evenly divide it among the div elements inside

Seeking assistance with a dynamic div wrapper containing multiple inner divs. The number of inner divs will vary, requiring a script to determine how many are present and adjust their widths to fit perfectly within the wrapper. <div id="wrapper"> &l ...

jquerycss

Data extracted from the range selector

Is there a way to take values and use them for hiding or displaying certain divs? I have been using jQuery Simple Slider for this purpose. I attempted the following code, but it did not work well. I want the div with id "3" to be visible when the slider ...

javascriptjqueryhtmlcss

CssLint detected an unfamiliar property: "fill"

Currently, I am updating the color of an SVG path using CSS: .compute .svg path { fill: #fff; } The functionality is working properly, however, during a CSSLint check, I received this warning: Unknown property: "fill" I am unsure if this is an erro ...

csssvgcsslint

javascript add items to a container

I created a looping animation that features dynamic words, but I'm struggling to append all the spans into the <div id"wordcloud"></div>. Any assistance with this would be greatly appreciated. var interval = 100; var width = 800; var he ...

javascriptjqueryhtml

jquery target descendants with specific names

In the provided HTML code snippet, there is a main div with the class name of cxfeeditem feeditem, and it contains multiple child elements with similar class names and structure. My query pertains to extracting values from specific children within all the ...

javascriptjqueryhtmljquery-uijquery-selectors

issue with JavaScript canvas

My task is to develop a Blackberry application, but I have limited knowledge in Java. Since the application requires drawing capabilities, I decided to use HTML5 and JavaScript instead. I started reading some JavaScript tutorials to prepare for this proj ...

javascripthtmlcanvas

Steps to create a dynamic <div> that is only visible within a parent <div>

First of all, I want to express my gratitude for welcoming me into the group. I am seeking assistance with an inquiry regarding jQuery animation. The specific animation in question can be seen on the navigation menu items of this template from Template Mon ...

javascriptjqueryhtmlcssanimation

The replaceWith() function in jQuery is able to transform PHP code into an HTML comment

How can I change a div element in a click event handler, while ensuring that PHP code inside the element remains intact and does not get moved into an HTML comment? You can find my code snippet below: $("#replaceCat1").click(function(){ $("div.boxconte ...

javascriptphpjqueryhtml

Is it possible to dynamically assign and call functions through an Object in Angular 6?

I implemented a click handler for a button that is generated dynamically. Within the click handler function, I am invoking a callback function. However, I encountered an issue where an error message popped up stating that "Callback function is not a fu ...

javascripthtmlangularthis

Adjust the height in proportion to the width

My goal is to adjust the height of the li's based on their width using JQuery. var width = $('li').width(); $('li').css('height', width + 'px'); However, I've encountered an issue as it doesn't resu ...

javascriptjqueryhtmlcss

Need to specify a parameter type for the input tag in HTML

Currently, I am developing a customized focus method for my webpage using the following script: <script type="text/javascript"> function myFunction() { document.getElementById("name").focus(); } </script> I ...

javascripthtml

Cannot access mobile navigation due to expanded browser search bar

Greetings, all! Currently, as I am in the process of developing a website for my company, I have encountered an issue with the navigation menu, specifically on mobile devices, or more accurately, mobile browsers(most of them). The hamburger icon seems to ...

htmlcssbrowsernavigationbarhamburger-menu

Is there a way to utilize jQuery to determine the distance the user has scrolled down?

Looking for some help with changing the style of an element based on scroll position using jQuery. Specifically, I want to add a class name to a div once the user has scrolled beyond 200 pixels and then remove the class name when they scroll back up to l ...

jquerycss

Can a submit button be created that integrates both a radio button and submission functionality?

Is there a way to combine a radio button and submit button into one element for submitting the value just with a click? Currently, I have a radio button and a separate submit button in my code, but I want to streamline it. This is the current code snippet ...

htmlcssforms

Fluid Grid design showcasing a gap on the right side

After working on the Skeleton Framework and making adjustments to the grid design, I am facing a small gap issue on the right side. Despite things slowly falling into place, this minor gap is causing confusion. Please refer to the image below for clarifica ...

javascripthtmlcssframeworksresponsive

Building a GWT webpage from scratch: A step-by-step guide

My project involves creating a website that features various Java tasks and informational content. Users can navigate through different pages by clicking on links from the homepage. Specifically, on the Java page, users will be able to complete tasks. Th ...

htmlgwtuibinder