Is there a way to align both a list icon and its contents in the center?

Can someone please assist me? I am attempting to replicate a website, but I am unsure how to center align an icon list and content.

Currently, it appears like this; https://i.stack.imgur.com/6FZCr.png

I would like it to look like this; https://i.stack.imgur.com/rM1hZ.png

#container-txt > ul > li {
  color: var(--tertiary-color);
  font-weight: 700;

  list-style-position: inside;
  list-style-image: url(./assets/Checkmark.svg);

  margin-bottom: 0.3rem;
}
<main class="intro">
  <div id="container-txt">
      <h1>Share your unfiltered<br>thoughts. Get paid.</h1>
      <p class="paragraph">Spense is an open platform for individuals to share their unfiltered thoughts.<br>Discuss the topics you love and get paid for doing <em>just</em> that.</p>

      <ul>
          <li>Receive 99% of the earnings.</li>
          <li>Get paid via Debit Card, ACH or PayPal.</li>
          <li>Withdraw your earnings anytime.</li>
      </ul>
  </div>
</main>

htmlcss

Answer №1

If you're looking to align an icon vertically, you can use the background-image property and replace the base64 data with a link to your desired image. This will ensure that the icon is centered on the first line, even if it wraps onto multiple lines.

To adjust the size of the icon, simply modify the custom property --iconSize: 1.5em defined on the :root (HTML) element. Keep in mind that this property is related to the line-height of the <li>, so be careful not to make it too large or small as it may affect the spacing when text wraps onto multiple lines.

:root{
  --iconSize: 1.5em;
  --iconGap: .5em;
}

#container-txt > ul {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  list-style: none;
  padding-left: 0
}

#container-txt > ul > li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z'/%3E%3C/svg%3E");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: var(--iconSize);
  color: var(--terciary-color);
  font-weight: 700;
  line-height: var(--iconSize);
  padding-left: calc( var(--iconSize) + var(--iconGap) )
}
<main class="intro">
  <div id="container-txt">
    <h1>Share your unfiltered<br>thoughts. Get paid.</h1>
    <p class="paragraph">Spense is an open platform for individuals to share their unfiltered thougths.<br>Discuss the topics you love, and get paid for doing <em>just</em> that.</p>

    <ul>
      <li>Receive 99% off the earnings.</li>
      <li>Get paid via Debit Card, ACH or PayPal.</li>
      <li>Withdraw your earnings anytime.</li>
      <li>Quisque urna euismod semper non consequat ullamcorper dis dolor euismod nulla a parturient dictumst rhoncus dignissim nibh nam a aliquet himenaeos est magna leo.</li>
    </ul>
  </div>
</main>

Answer №2

#container-txt>ul>li {
  display: flex;
  align-items: center;
  color: var(--terciary-color);
  font-weight: 700;
  list-style-position: inside;
  list-style-type: none;
  margin-bottom: 0.3rem;
}

#container-txt>ul>li svg {
  height: 12px;
  margin-right: 5px;
}
<main class="intro">
  <div id="container-txt">
    <h1>Express Your Honest Thoughts and Get Rewarded</h1>
    <p class="paragraph">Spense is a welcoming platform for sharing unfiltered ideas.<br>Engage in your favorite discussions and earn rewards for doing so.</p>

    <ul>
      <li> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https: //fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg>Receive
        99% of the earnings.</li>
      <li> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https: //fontawesome.com License - https: //fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg>Get
        compensated via Debit Card, ACH, or PayPal.</li>
      <li> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https: //fontawesome.com License - https: //fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg>Withdraw
        your earnings at any time.</li>
    </ul>
  </div>
</main>

-#container>ul>li establishes display:flex and 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

Having trouble with a React child component not reacting to a click event?

The current issue I am experiencing is that the component is not triggering a click event when the button is clicked. TickerPage render() { return ( <div className="TickerPage"> <div className="TickerPage-container"> <b ...

javascripthtmlreactjs

The duplicate code is failing to display any output

Welcome to my first question here! Please excuse any rookie mistakes. I am currently working on a specialized calculator using HTML, JS (with jQuery), and CSS. This calculator is designed to handle multiple inputs and perform various calculations on a sing ...

javascripthtmljqueryinput

Preventing mouse clicks on checkboxes and triggering events using JavaScript - a complete guide

We have a Table grid with multiple columns, one of which is a Select Box (CheckBox). The expected behavior is that when a row is clicked, the respective CheckBox should get checked, and clicking on the CheckBox itself should update it. I tried implementin ...

javascriptjquerycss

Assertion error: 1 does not match the expected value of 6

I am faced with a challenging test that requires me to write code that will pass successfully. However, no matter what I try, all I get is the following error messages: "Failed asserting that 1 matches expected 6" when I return 6 and "Too few arguments t ...

phphtmlobjecttesting

CSS and markup that appear the same are producing different renderings in the browser

I recently purchased the Ambrosia bootstrap theme, but I am facing difficulties with setting up the login page. You can view my login page here. The issue I am encountering involves the Twitter, Facebook, and Info icons that are positioned to the left of ...

htmlcsstwitter-bootstrap

When the browser width is reduced, the text appears outside of the image

When pasting text into an image in this example, everything looks fine at first. However, as the browser width is reduced, the text starts slipping out of the picture. To make matters worse, unsightly line breaks are also added. Is there a way to prevent ...

htmlimagecss

Is there a way I can align these items in the center of the span?

Issue at Hand: The SVG and text elements are not aligning to the center of my spans as desired. Attempts Made: I have experimented with different display modes, used margin properties for alignment, and tried adjusting text-align. I even searched for so ...

htmlcss

Transfer the information from dropped files in a div to a separate page

document.getElementById('drag_drop').ondrop = function(event) { event.preventDefault(); var form_data = new FormData(); var drop_files = event.dataTransfer.files; for(var count = 0; count < drop_files.length; count++) ...

javascriptphphtml

Accessing a key from an AJAX JSON response and applying it within a .each() loop in jQuery

I'm struggling with a seemingly simple task that I just can't seem to get right. My goal is to convert multiple text inputs into select fields using AJAX and jQuery. Everything works smoothly, except when trying to make the $.each function dynam ...

javascriptjqueryhtmlajaxjson

Decoding JSON in AngularJS

Looking for assistance in parsing a JSON 2D array with Angular JS and fetching images from the array. Can anyone provide some guidance on this? I have updated my Plunker at this link HTML Code <!DOCTYPE html> <html lang="en" ng-app="myAp ...

javascripthtmlangularjs

Python: HTML regex not finding a match

This is the code snippet I am struggling with: reg = re.search('<div class="col result_name">(.*)</div>', html) print 'Value is', reg.group() The variable 'html' holds content like this: <div class="c ...

pythonhtmlregex

Could you assist me in navigating the process of creating a dynamic 10x10 multiplication table using HTML and JavaScript? I'm eager to learn where to begin with this methodology

As I explore various questions related to the "simple" multiplication tables, I find myself with a more fundamental query. I am seeking clarity on how Javascript operates when intertwined with HTML, as that is where my confusion lies. In my multiplication ...

javascripthtmloperatorshtml-table

Adjust the background color of a specific list item when hovering over another list item

My dilemma lies in my inadequate knowledge to solve this issue: I have a dropdown menu embedded within a website. (View screenshot here: [SCREENSHOT]) The desired outcome is for the background color of an icon on the main list to change when I navigate to ...

javascriptjqueryhtmlcss

generate a customized synopsis for users without storing any data in the database

In order to provide a summary of the user's choices without saving them to the database, I want to display it in a modal that has already been created. Despite finding some sources online, none of them have worked for me so far. Below is my HTML: &l ...

javascriptjqueryhtmlcss

Can a hyperlink be generated by simply inputting the URL once?

As I add numerous links to my website, I can't help but feel like a novice using the <a href>. I want users to see the URL of each link immediately without needing to hover over it first. Right now, I am structuring my links like this: <a h ...

htmlcss

Ways to eliminate basic text from HTML/HAML

Seeking a solution to align an image with CSS that is being hindered by unwanted text appearing next to it in Inspect Element. Despite pinpointing the source of the issue, attempts to remove the text have been unsuccessful and it continues to be a nuisance ...

htmlcsshaml

Navigate through photos (jQuery) to adjust size and location dynamically (CSS)

Currently, I am in the process of developing a jQuery script that will automatically adjust the size and position of image elements upon page load or resize. To structure my layout, I am utilizing Bootstrap and have set a fixed height using CSS. It is wort ...

jqueryhtmlcsstwitter-bootstrap

Performing condition checks within the foreach loop and displaying numerous results in a single row

I have a list of results from searching certain parameters and I need to print them out. When using a foreach loop to print the results, I want to ensure that if the purchase dates are the same, they should be printed in the same row. How can I achieve thi ...

phphtmlhtml-table

Insert text into the cursor location within Summernote using JQuery

Currently, I am working on a flutter application where I have implemented the summernote editor using JQuery. ClipboardData data = await Clipboard.getData(Clipboard.kTextPlain); String txtIsi = data.text .replaceAll("'", '\&bsol ...

javascripthtmljqueryflutterwebview

Sort the currency column in an HTML table through JavaScript

I have a code snippet below that I'm currently utilizing to arrange columns in an HTML table. The code works perfectly for alphabetical sorting and also for single-digit numbers. However, when attempting to sort a column containing currency values, t ...

javascripthtml