How can I align icons to the right and display text below each one?

I need to display icons with their names below them in a row from left to right, with proper spacing. Each icon should have its name displayed underneath it, for example "Icon1" under icon1 and so on. The tierGo element does not contain any CSS styles.

<div id="tierGo">
    <h1>Icon List</h1>
    <img src="tinyIcons/icon1.png" style="margin-right:15px;" />
    <img src="tinyIcons/icon2.png" style="margin-right:15px;" />
    <img src="tinyIcons/icon3.png" style="margin-right:15px;" />
    <img src="tinyIcons/icon4.png" style="margin-right:15px;" />
    <img src="tinyIcons/icon5.png" style="margin-right:15px;" />
</div>
htmlcsslisttwitter-bootstrapmargin

Answer №1

I found a successful solution by using divs and a list structure. I also incorporated some CSS styling to enhance the presentation. Check out the Fiddle

<div id="tierGo">
    <h1>Icon List</h1>
    <ul>
   <li> <div image1>
            <img src="http://placehold.it/50x50"/>
        <div >
            Image 1
        </div>
    </div>
   </li>  
   <li> <div image2>
            <img src="http://placehold.it/50x50"/>
        <div >
            Image 2
        </div>
    </div>
   </li>  

   <li> <div image3>
            <img src="http://placehold.it/50x50"/>
        <div >
            Image 3
        </div>
    </div>
   </li>  
    </ul>

To style this setup, use the following CSS:

li{
    list-style-type: none;
    display: inline;
    margin-right: 15px;
    float: left;
}

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

Steps on modifying the background of an element based on its location within the browser:

In the past, I've come across some impressive one-page websites with elements that would appear as you scroll. It seemed like they were created using just CSS. I think it might be achievable with the z-index and position properties? However, I can&ap ...

csswebz-index

Header unresponsive to user interactions

Hey everyone! I'm new to using Foundation and I've hit a roadblock in my code on a medium-sized device. I would greatly appreciate your input to help me identify my mistake. Below is the snippet of my code: <div class="row"> <div cl ...

htmlcsszurb-foundation

Implementing the style tag within a view

In my exploration of various Razor views, I've noticed a common practice where developers include a <style> tag directly in the CSHTML file. While this method may seem to work without issue, it actually places the <style> tag within the & ...

c#cssasp.net-mvcmodel-view-controller

A more Pythonic approach for locating the maximum and minimum values within an array of dictionaries

What I have: vec=[{'max': 23.425, 'date': u'2017-07-18', 'ismax': False, 'ismin': False, 'min': 14.615}, {'max': 23.83, 'date': u'2017-07-19', 'ismax&apos ...

pythonlistdictionaryslice

Problem with Flickity's is-selected feature

I am currently exploring Flickity and its functionality. I have a carousel that auto-plays, with the selected cell always placed in the middle and highlighted with a grey background. However, I would like to customize it so that the selected cell is positi ...

htmljquerycssflickity

Utilize the Static Path in Django with Template Filters

To easily version my css file using a simple template variable, I update the version in my settings and it automatically applies to all files. Here's how I accomplish this: Template Filter @register.filter def settings_value(name): return getatt ...

cssdjango

Implement scroll bar functionality on canvas following the initial loading phase

I am currently working with canvas and I need to implement a scroll bar only when it is necessary. Initially, when the page loads, there isn't enough content to require a scroll bar. My project involves creating a binary search tree visualizer where u ...

javascriptcsshtml5-canvasoverflowp5.js

Displaying all items in the flexbox in a single row by decreasing the width of each individual box

After some tweaking, I now have a lineup of boxes styled like this: Check out the code in action on Codepen. Unfortunately, StackOverflow doesn't display it accurately. This is the CSS I implemented: @font-face { font-family: "Heebo-Light"; src: ...

htmlcssflexbox

AngularJS Splice Function Used to Remove Selected Items from List

I previously inquired about a method to remove items from the Grid and received a solution involving the Filter method. However, I am specifically looking for a way to remove items using the Splice Function instead. You can find my original question here: ...

javascripthtmlangularjsangularjs-ng-repeat

Style a CSS underline of an element that is contained within a span

Kindly refer to the information provided below: <span class="caption"> {block:Caption}<p>{Caption}</p><hr>{/block:Caption} </span> The Caption block will include text, with a section of it being a hyperlink. How can I desig ...

htmlcss

PHP is sending incomplete email messages

After implementing a PHP script to send an email upon unsubscribing, I encountered an issue where only part of the email was being sent. Here is a JSFiddle example that represents how the complete email should look, although it may not appear neat due to b ...

phphtmlemail

Center the "td" elements within a table

I am struggling with a design that involves two tables placed side by side within a main table. <table> <tr> <td style="width: 50%"> <table id="table1"> <tr><td></td></tr> <tr><td></t ...

cssasp.nethtmlhtml-table

Accessing a variable from another HTML using JavaScript

I'm currently attempting to access a variable from another HTML file using JS. Specifically, I have a file (file1.htm) that opens a dialog box, and I want to send the information of the selected file to another file (file2.htm) in order to modify a v ...

javascripthtml

Incorporating an additional table dynamically based on height considerations – can you provide visuals as guidance?

The visual representation of my question far surpasses my verbal explanation. My intention is to insert a new table once the height of the previous table exceeds a specific HEIGHT limit, not a certain number of rows. This project does not involve creat ...

javascriptphpjquerycssasp.net

Using Selenium to choose an element based on the text of its sibling element

I've been working on a selenium script for: My goal is to select the "Add to Compare" element for "Sony Xperia," but it's not being located. I've tried using both cssSelector and xpath, but I can't seem to figure out what I'm doin ...

jquerycssseleniumtestingxpath

Implementing CSS styles with the className attribute in a Material UI component within a ReactJS application sourced from a dynamic JSON object

I have a dynamic JSON object that includes a button element. I am using createElement and Material UI to display the data from this object. I wanted to add custom CSS styling to the button component using className, but I've been struggling to achiev ...

javascriptcssreactjsmaterial-uijsx

Webpage refreshing when resizing browser

Hey there, I'm facing an issue where my HTML website restarts whenever the browser size changes. Can someone please help me fix this? You can check out my website here I have uploaded my code files here: Code Files Link ...

javascripthtmlcssreload

Custom hover title to transform table into grid

I'm currently working on creating an HTML table and integrating it with the following code: tableToGrid('#grid', {cmTemplate: {sortable:false}}); The original structure of my HTML table is as follows: <tr><th>Month</th>& ...

jqueryhtmljqgrid

Retrieve an item from the Ionic Firebase database

My current challenge is retrieving data from the Firebase database. user-service.ts getProfile(){ try {; return this.afDatabse.object(`profile/${this.afAuth.auth.currentUser.uid}`); } catch (e) { console.log(e); } } c ...

javascripthtmlangularfirebaseionic-framework

Ways to prevent a particular link from functioning in HTML or JavaScript

Hey there, I am currently using a Gchat voice and video chat script. Check out my website if you're interested. The issue I'm facing is that someone logs into my chatroom and uses this flash link to crash other users' browsers. Whenever th ...

javascriptjqueryhtml.htaccess