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

Displaying the URL of a link on the screen using jQuery

I am looking for a solution to add a link address after the link itself in a table containing reference links for our staff. I have used CSS to achieve this in the past, but the address was not copyable by users. Instead, I am interested in using jQuery&ap ...

javascriptjqueryhtml

Scrolling down a jQuery div after each new item is added.OR

I have a div acting as a chat feature, where messages are appended based on user actions. I am trying to make it so that the div automatically scrolls down after each message is added, but I'm encountering some issues with this functionality. You can ...

javascriptjqueryhtmlcss

The correct way to reference images in the resources folder using a URL in CSS

After I generated a Maven dynamic web project using an archetype, I decided to organize the javascript, css, and image folders under the webapp folder. The structure now looks like this: myproject | main | | | java | | | resources | | ...

cssmaven

The modal box should adjust its height to perfectly accommodate the content within

I'm in the process of developing a straightforward modal (popup) window, using as few lines of code as possible... just the basics. The modal has a maximum width of 650px and its height adjusts to fit the content. In case the content exceeds the avai ...

htmlcss

Ways to hide the value from being shown

I have integrated jscolor (from jscolor) to allow users to pick a color with an input field. However, I am facing issues in styling it as I'm unable to remove the hex value of the selected color and couldn't find any relevant documentation on av ...

javascripthtmlcsscolor-pickerjscolor

Is there a distinction between the values 'normal' and 'stretch' in the CSS property known as 'align-content'?

When it comes to the CSS declaration 'align-content', the default value is 'normal'. But, there is also another option: 'stretch'. I have been having a hard time figuring out if there is any actual difference between the two. ...

cssflexbox

Difficulties encountered while attempting to modify a class using Javascript

Recently, I've encountered an issue with my JavaScript where I am unable to keep a particular element's class changed. Despite attempting to change the class to "overlist", it only stays that way briefly before switching back to its original stat ...

javascripthtmlcssfunctionclass

The act of sorting an item in jQuery triggers a reordering of items

I am working with a collection of items that represent different layers within div elements. One of my goals is to ensure that when I rearrange these items, their corresponding div layers are also sorted accordingly. Here is the list of sortable items: & ...

javascriptjqueryhtmljquery-uijquery-ui-sortable

How can I correct the code that is running both the if and else statements simultaneously?

In the code snippet below, a comparison is made between a username and password. If both are correct, the user is redirected to another page. However, there seems to be an issue where both the if and else statements are executing. Code: if (isset($_POST[ ...

phphtml

What techniques can I employ in HTML and CSS to design the user interface for my Java application?

Recently, I came across an interesting article at this link: http://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm. The article demonstrates how to develop a java application utilizing the javafx library and utilizing classes like WebEngine and WebVie ...

javahtmlcssuser-interfacejavafx

Only output to the console if the data returned from an AJAX request has been

Here is a script that I created: <script type="text/javascript> $('.storage').html(""); setInterval(function(){ $.get('./playcommand.php', function(data) { if($('.storage').html() !== data){ ...

javascriptphpjqueryhtmlajax

Introducing a novel class designed to leverage the attributes of another class

Is there a way to use the @extend feature in CSS to inherit properties from one class to another? Imagine having two CSS files loading on a page in this order: <link rel="stylesheet" href="/css/one.css" media="screen"> <link rel="stylesheet" href ...

css

Attach [!hidden] to a dropdown menu choice using Angular 2

How can I implement a show/hide feature for a select box in Angular 2+? Here's what I have so far: <select> <option disabled selected>Flow progress</option> <option *ngFor='let flow of flows'>{{flow}}< ...

htmlangulartypescriptangular2-forms

Find all paragraphs with the CSS property "background-color" using JQuery

My task involves modifying the CSS of a paragraph tag that has a background color of #aaddff. The code I have written seems to be missing something, as the border is not appearing as expected. Should I use element.style or is there a different approach I ...

jquerycss

Steps to display the datatable footer on the printed page

I am having trouble understanding the solutions provided for my table query. The current table setup is as follows: <table class="table table-bordered make_datatable"> <thead> <tr> <th>SL No</th> ...

javascriptjqueryhtml

Using Twitter Bootstrap to set a minimum number of lines for thumbnail captions

I currently have a carousel on my website created using Bootstrap that displays 4 columns of thumbnails. You can view the carousel here. When navigating to the third page of the carousel, you will notice that the container increases in height to accommodat ...

csstwitter-bootstrap

Error in Typescript: Function not being triggered on button click

As someone who is just starting out with typescript, I've been tackling a simple code that should display an alert message in the browser when a button is clicked. I've experimented with the button and input tags, as well as using both onclick ev ...

javascripthtmltypescript

What is the correct way to adjust the style.top attribute of an element using JavaScript?

In order to correct a JavaScript source code, I need to adjust the style.top property of a div element based on an integer parameter from a function called index. Here is the current implementation: div.style.top = (index * 22 + 2)+"px"; However, for lar ...

javascriptcss

Navigate up to the ancestor element before moving back to the previous two sibling elements using Xpath

Here is an example of HTML code: <span class="state"> <label class="state button start" ...>"Start"</label> </span> <span class="name tracker_markup"> <span class="labels pre ...

pythonhtmlxpathselenium-webdriver

Modifying the Color of Individual Items within the Pagination Component in MUI

I am attempting to modify the background color of every item in my Pagination component by utilizing makeStyles. import { Pagination } from "@material-ui/lab"; import { makeStyles } from "@material-ui/core"; const pagination = makeStyl ...

javascriptcssreactjsmaterial-ui