Positioning an image on the left side of a div within a flex container using

Here is the code I have:

.usp-bar {
            display: flex;
            flex-wrap: wrap;
            background-color: #005932;
            color: #fff;
            font-weight: 700;
            padding: 10px 0;
            margin-top: 0;
            justify-content: center;
            height: auto;
        }
    
    .usp-text {
        font-family: inherit;
        font-size: inherit;
        margin: auto;
    }
    
    .icon {
        background-image: url(/media/icon.png);
        background-repeat: no-repeat;
        width: 40px;
        height: 40px;
    }

Here is the corresponding HTML:

<div class="usp-bar">
<div class="icon"></div>
<div class="usp-text">USP 1</div>
<div class="icon"></div>
<div class="usp-text">USP 2</div>
<div class="icon"></div>
<div class="usp-text">USP 3</div>
</div>

I am trying to position an icon to the left of each text box within a full-width responsive bar. The text should be centered and overlay the icon as a background image. Can anyone assist with this design challenge?

htmlcss

Answer №1

<html>
  <head>
    <meta charset="UTF-8" />
    <script src="script.js"></script>
    <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
    <style>
      .usp-bar {
        display: flex;
        flex-wrap: wrap;
        background-color: #005932;
        color: #fff;
        font-weight: 700;
        padding: 10px 0;
        margin-top: 0;
        height: auto;
      }
      .icon {
        background-image: url('https://img.icons8.com/ios-glyphs/50/000000/networking-manager.png');
        background-repeat: no-repeat;
        width: 40px;
        height: 40px;
      }
      .box {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <div class="usp-bar">
      <div class="box">
        <div class="icon"></div>
        <div class="usp-text">USP 1</div>
      </div>
      <div class="box">
        <div class="icon"></div>
        <div class="usp-text">USP 2</div>
      </div>
      <div class="box">
        <div class="icon"></div>
        <div class="usp-text">USP 3</div>
      </div>
    </div>
  </body>
</html>

please review this code if it meets your requirements

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

Retrieve the image source when clicking on multiple posts that share the same div class and button class

<script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script> $(function(){ $('.like').click(function(e){ e.preventDefault(); // stop the page from reloading alert( $('.post-container&apos ...

jqueryhtmlejs

Using either Javascript or jQuery, I want to set a value within an if statement

Can I set a value within an if statement, like this: if (a = jQuery("#user > .mask.fix > .a1").css('display') != 'none'){ b = a + 'hello'; //b=jQuery("#user > .mask.fix > .a1").css('display')+&apos ...

javascriptjqueryhtmlfunctionif-statement

Height problem with Semantic UI cards in Chrome on Windows

Encountering an issue specific to Chrome on Windows where the height of my .card elements is not displaying correctly. The height appears to be either too much or too little, causing the problem shown in the screenshot below. This issue seems to be isolate ...

cssgoogle-chromeflexboxsemantic-ui

Guide on how to set the grid cell width to 0 for specific dimensions

What can be used in place of mdl-cell--0-col-phone to either disable an element or make its width zero? <div className="mdl-grid"> <div className="mdl-cell mdl-cell--2-col-phone mdl-cell--2-col-tablet mdl-cell--2-col-desktop"> <Left ...

cssmaterial-ui

Dividing a pair of CSS stylesheets on a single HTML page

Currently, I am working on a HTML page that includes multiple javascripts and css files in the header section. <link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet" type="text/css" /> In order to make the website mobile-friendly, I s ...

javascriptjqueryhtmlcss

Implementing Mouse Scroll Click Functionality in ASP.NET with C# (Without JavaScript)

How can I add a Mouse Scroll Click (Middle Button) event in ASP.NET and C#? I have already looked into the MouseWheel Event, but it did not provide the solution I was looking for. This is the order in which mouse events occur: MouseEnter MouseMo ...

c#asp.netcsseventsmouseevent

Div displaying with extra space below

UPDATE check out the new jsfiddle link here that effectively showcases the problem I am encountering an issue with white space appearing below my div. This can be seen in 2 photos, one of which is scrolled down: https://i.sstatic.net/yHlXL.png https:// ...

htmlcsstwitter-bootstrap-4

Overlaying div above vimeo player

I'm attempting to overlay a div on top of a Vimeo video, a task I anticipated would be straightforward but turns out to be more complex than expected. Below is the HTML code snippet: <div id="wrap"> <iframe id="video" s ...

htmlcssflashvideo

Adjust the CSS of the currently dragged item using jQuery sortable

I am currently using jQuery-ui sortable and facing an issue with changing the appearance of a dragged item. I would like the text value of the component inside the red background container to be displayed while dragging. Can someone please assist me with t ...

jqueryhtmlcssjquery-uijquery-ui-sortable

Reset input fields while retaining placeholder text

Seeking advice on how to use this handy jQuery tool properly: $('.myDiv input').each(function () { $(this).val(""); }); Though it clears my form, I'm struggling to maintain the placeholders of the inputs. Any suggestions? C ...

javascriptjqueryhtmlplaceholder

Offset the content from the border within a container that includes a scrollbar

The containing element has some content that is set to have a fixed height and overflow: auto; as shown in the JSFiddle link provided. When scrolling through the text, you will notice that the border comes into contact with the text both above and below. ...

cssscrollpadding

animation of leaping to a specific element

I am currently working on a sidebar with links that have a hover effect to add a bullet. However, I want the bullet to smoothly follow the cursor's movement along the y-axis within the sidebar instead of jumping between the links. How can I achieve th ...

javascriptjquerycsshtml

Switching button class when hovering over another div

When you click on the "collapsible-header" div, I want the text "TE LAAT" in the button to change to "NU BETALEN". Currently, the CSS code changes the text on hover, but I want it to change on click when the collapsible-header also has the active class. T ...

javascriptjqueryhtmlcssonclick

Steps for modifying a cell within a table using a button click

Hello, I am currently working on a project where I want to display a specific div portion when a user clicks on an image icon within a table. However, I am encountering an issue with the JavaScript code as it only shows the div portion in the first row and ...

javascripthtml

What is the best way to add a listener for a modification of innerHTML within a <span>?

How can I detect changes inside a particular <span> element in order to attach a handler, but so far have been unsuccessful? Below is the HTML snippet: <span class="pad-truck-number-position"><?php echo $_SESSION['truckId']; ?> ...

javascriptphpjqueryhtml

RMarkdown Question: Is there a straightforward method to insert additional space following each tabset?

When creating reports using R Markdown, I implement tabsets (.{tabset}) to display multiple results without stacking them one after the other. For example: # First session {.tabset} ## A First result ## B Second result # Next session Howev ...

htmlrr-markdownline-breaks

Styling based on conditions, hovering effects, and implementing ReactJS

One issue I am facing is with an anchor element within a <div>. The anchor has conditional background styling, which seems to override the a:hover style. Whether I have conditional or fixed coloring, removing the background-style from component.js al ...

cssreactjs

Smooth carousel navigating through dots

I am currently using the slick carousel from http://kenwheeler.github.io/slick, and I am looking for a way to limit the number of dots to 8 even when there are more than 8 slides. The navigation dots should include arrows on the left and right sides to in ...

javascriptjquerycsscarouselslick.js

Typekit compatibility with Internet Explorer 11

After dedicating months to a project, everything seemed to be running smoothly until one client consistently pointed out font discrepancies in the screenshots. I attributed this to a possible browser issue but soon discovered that the entire network had sp ...

cssinternet-explorertypekit

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

htmlcss