Spread out the items within an inline block

Is there a way to create space between icons that are in an inline block without them touching each other? One solution could be to add a container around each icon, center the icons within the containers, and then place the containers in the block.

You can find a code example here: https://jsfiddle.net/mfw3ntnm/

.foot-bar {
  position: fixed;
  bottom: 100px;
  display: inline-block;
}

.image-holder {
  width: 150px;
  height: 150px;
  align-content: center;
}

However, adding the "image-holder" class seems to cause formatting issues with the inline block display. The goal is to wrap the images in a container and center them while maintaining the inline-block format. Any suggestions on how to achieve this?

htmlcss

Answer №1

Here is a concept to consider. https://jsfiddle.net/sheriffderek/1t6er3m0/

<ul class='thing-list'>
  <li class='thing'>
    thing 1
  </li>
  <li class='thing'>
    thing 2
  </li>
  <li class='thing'>
    thing 3
  </li>
</ul>

...

.thing-list {
  border: 1px solid red;
  text-align: center; /* for inline and inline-block child elements */
}

.thing-list .thing {
  border: 1px solid blue;
  display: inline-block; /* enables centering by parent rule */
}

.thing-list .thing:not(:first-of-type) {
  margin-left: 1rem; /* spacing them out */
  /* padding or flexbox can also be used */
}

If they are touch icons, using padding would provide a larger touch area. I will include this in the fiddle. : )

<ul class='icon-list'>
  <li class='icon'>
    <a href='#'>I1</a>
  </li>
  <li class='icon'>
    <a href='#'>I2</a>
  </li>
  <li class='icon'>
    <a href='#'>I3</a>
  </li>
  <li class='icon'>
    <a href='#'>I4</a>
  </li>
</ul>

...

.icon-list {
  align-items: center;
}

.icon-list .icon {
  display: inline-block;
  align-items: center;
}

.icon-list .icon a {
  display: block; /* provides solid touch area */
  padding: .5rem 1rem;
  border: 1px solid green;
}

.icon-list .icon a:hover {
  background: lightgreen;
}

Answer №2

You have the option to add a margin solely to the 2nd image container (margin-left and right). Take a look at the example provided below

.foot-bar {
  position: fixed;
  bottom: 100px;
}
.image-holder {
  text-align: center;
  display: inline-block;
}
.image-holder:nth-child(2) {
  margin: 0 10px;
}
/**if more than 3 images
.image-holder:nth-child(even) {
  margin: 0 10px;
}
**/
<div class="foot-bar">
  <div class="image-holder">
    <a href="about.html">
      <img src="images/profile.png" width="100" height="100" />
    </a>
  </div>
  <div class="image-holder">
    <a href="projects.html">
      <img src="images/projects.png" width="100" height="100" />
    </a>
  </div>
  <div class="image-holder">
    <a href="blogs.html">
      <img src="images/blogs.png" width="100" height="100" />
    </a>
  </div>
</div>

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 mystery of the unassigned value in $(this).data(value) when using the jQuery click() method

In my Rails 5 application, I am working on creating a dynamic menu that will guide users to different parts of the site based on their location. The idea is that when they click on a specific menu item from the home page, a modal will appear allowing them ...

javascriptjqueryhtml

Compatibility of Bootstrap 4 with collapsible elements and display utilities

I have noticed an issue with Bootstrap 4 display utilities not functioning properly with the .collapse class, a feature that worked seamlessly with Bootstrap 3. Despite my efforts to research this problem, I have been unable to find similar inquiries regar ...

htmlcssbootstrap-4display

Verify for any alterations in the code by utilizing the inspect element feature

Currently dealing with a security concern regarding my older Java application. Is there a method available to detect any modifications made to my code (HTML or script) through Developer Tools on the user's end? This would allow me to prevent form subm ...

javascriptjqueryhtmlsecuritybrowser

Verify if the second list item contains the "current" class

When displaying a list of blog items on the blog page, I am using grid-column: 1 / -2;. In the first row, the first blog item spans two columns while the second and subsequent rows display three items in each row. This setup works well, but when moving to ...

htmljquerycss

Is there a way to transfer all the selected items to PHP using AJAX?

I am looking for a way to send all the checked items into PHP using AJAX. I want to include the checkbox ID and inner text in the information that is sent. For example, if I check box1 and box2, I want the relevant information to be saved in Data and then ...

javascriptphpjqueryhtmlajax

What is the best way to position a popup div in CSS?

Currently, I am in the process of developing a website that displays DVD details when hovering over an image, similar to what is shown in picture 1. However, I've encountered an issue where the content gets cut off for DVDs located on the right side o ...

javascripthtmlcss

Using Vuejs to dynamically render raw HTML links as <router-link> elements

Hey there, I'm just getting started with VueJS and I've been doing some interesting experiments. I created a backend service using Python/Flask that provides me with a string of HTML code containing many tags. My goal is to render this HTML insid ...

javascripthtmlvue.jsfrontend

Searching dynamically using class names with JQuery

I am seeking to create a dynamic search input based on the class names within the span tags. However, I am struggling with displaying the class name that I have identified. My goal is to show the class names that match the entered value in the input on the ...

javascripthtmljquerycss

Tips for passing values and their corresponding labels during a click event in Angular 4

When I click the plus button, I want to hide the li element. Even though the data is passing correctly, the li element is not clearing as expected. The desired outcome is for the li instance to be removed once the plus button is clicked. https://i.stack.im ...

htmlangulardom

Aligning a series of images with individual captions in the center

I am currently working on centering a row made up of four images along with their respective captions underneath. The code I am using is as follows: <div class="clear" style="text-align: center;"> <div style="float: left; padding-right: 10px;"& ...

htmlcss

What are some strategies for maintaining a responsive layout with or without a sidebar?

I've made the decision to incorporate a sidebar on the left side of all pages across my website. This sidebar must have the ability to be either hidden or shown, without overlapping the existing content on the page. However, I'm encountering an ...

htmlcss

What are the steps to incorporating ng2-dnd with a background-image?

I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element. My goal is to allow user ...

htmlcssangular

Iterate over JSON dates in JavaScript

Trying to utilize JavaScript in looping through a JSON file containing time periods (start date/time and end date/time) to determine if the current date/time falls within any of these periods. The provided code doesn't seem to be working as expected. ...

javascripthtmljson

Troubleshooting the problem of divs overlapping when scrolling in JavaScript

I am experiencing some issues with full screen divs that overlay each other on scroll and a background image. When scrolling back to the top in Chrome, the background shifts down slightly, and in Safari, the same issue occurs when scrolling down. I have cr ...

javascriptjqueryhtmlcss

Handling onMouseLeave event for Popover component in material ui library with hiderBackdrop parameter specified

<Popover key={element.id} className={classes.popoverItem} classes={{ paper: classes.paperElement }} open={isOpen} anchorEl={this.myRef.current} anchorOrigin={{ vertical: 'bottom&apo ...

htmlcssreactjsmaterial-ui

Enhance your coding experience with code completion and autocomplete in Angular/Typescript using ATOM within

Is it possible to have Codecompletion / Autocomplete in Atom similar to Webstorm? Currently I am getting familiar with TypeScript and really enjoying it, but the lack of Codecompletion support for my HTML files in Atom is quite frustrating. Having this f ...

javascripthtmlangularjstypescriptatom-editor

jQuery causing trouble with AJAX in Rails

Currently, I am fetching a list of users from the controller side and generating the HTML code to append it. This is how I wrote the code: $.ajax({ type : "get", contentType : "application/json; charset=utf-8", url : "/users/sear ...

javascriptjqueryhtmlruby-on-railsajax

Is it a Mozilla Firefox glitch or something else?

After writing the code, I noticed a bug in Firefox and a small bug in Chrome. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

javascriptjqueryhtmlfirefox

Is there a way to trigger the onclick event while dragging the div?

Exploring a Div: <div id="up" onmousedown="handleMouseDown('url(/scanToUserBox/img/cpt_subfunc_005_prev_p.png)', this)" onclick="changePage('up')"> </div> Upon clicking the div, the onmousedown event is trig ...

javascripthtmljsp

What is the best way to implement complex input filtering in JavaScript?

Is it possible to filter input content in this format? The input should accept 16 characters, separated into 4 groups by ":" like this: 0123:0055:02AC:01FA I divided them into 4 groups for later use, but I want to set a filter with the minimum value bei ...

javascriptjqueryhtml