The final line of inline-block divs veers towards the right

After extensive searching on Google and Stack Overflow, I am still struggling to resolve this particular issue.

The frustration is growing exponentially, and it's starting to drive me a little insane!

The problem lies within my menu structure, which consists of multiple blocks created using divs with display: inline-block property.

I've experimented with float:left as well, but the main requirement is to have all blocks centered on the screen, which seems unachievable with this method.

Although the inline-block approach adapts well to different screen sizes by creating additional rows, there is always a 2-pixel offset in the last row!

Below is a snippet of my code along with the corresponding CSS...

<div class="menublock"><div class="menublock-inner" style="text-align:center;"><i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i><br /><br /><b>home</b></div></div>
<!-- Additional html markup here -->

When executed, the output looks like this...

https://i.sstatic.net/oN2Wh.png

https://i.sstatic.net/a27ev.png

htmlcss

Answer №1

Whenever I see this old link, it always catches my attention:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

I would approach it a bit differently like this: 

body {
  background: #000;
}

.wrapper {
  margin: 30px auto;
  padding: 0;
  text-align: center;
  width: 100%;
  max-width: 610px;
}

.menublock {
  margin: 0;
  padding: 0;
  display: inline-block;
  }
  .menublock-inner {
    margin: 0;
    padding: 0;
    display: table;
    vertical-align: middle;
    background: rgba(0,94, 184, 1);
    height: 200px;
    width: 200px;
    }
    .icon {
      margin: 0;
      padding: 0;
      display: table-cell;
      vertical-align: middle;
      }
      .fa {
        
      }
      span {
        padding-top: 5px;
        display: block;
        color: white;
        text-transform: uppercase;
      }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrapper">
  
  <!-- block -->
  <div class="menublock">
    <div class="menublock-inner">
      <div class="icon">
          <i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
          <span>home</span>
      </div>
    </div>
  </div>
  <!-- eo: block -->
  
  <!-- block -->
  <div class="menublock">
    <div class="menublock-inner">
      <div class="icon"å̈ gt;
          <i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
          <span>home</span>
      </div>
    </div>
  </div>
  <!-- eo: block -->
  <!-- block -->
  <div class="menublock">
    <div class="menublock-inner">
      <div class="icon">
          <i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
          <span>home</span>
      </div>
    </div>
  </div>
  <!-- eo: block -->
  <!-- block -->
  <div class="menublock">
    <div class="menublock-inner">
      <div class="icon">
          <i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
          <span>home</span>
      </div>
    </div>
  </div>
  <!-- eo: block -->
  <!-- block -->
  <div class="menublock">
    <div class="menublock-inner">
      <div class="icon">
          <i class="fa fa-home fa-3x" style="color:#fff;" aria-hidden="true"></i>
          <span>home</span>
      </div>
    </div>
  </div>
  <!-- eo: block -->

</div>
<!-- eo: wrapper -->

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

What is the best way to position a <div> in the center of a container?

I am currently designing a cart page for an online store, and I have decided to showcase all the items in the cart using a table format. Here is my plan: https://i.sstatic.net/PJBpo.jpg My goal is to have the name, quantity, and price of each product dis ...

htmlcss

Styling group headers within an unordered list using pure CSS - possible?

Hey there, I'm looking to spruce up my UL by adding group headers. Here's a sneak peek at the structure I have in mind (keep in mind this is generated dynamically from a database): <ul> <li class='group group-1'> < ...

htmlcsscss-selectors

Creating a toggle link with 5 different states in coding

I have an HTML table where certain TDs contain inline styles, title tags, and links. I am looking to implement a feature where users can hide these elements by clicking the same icon multiple times. For example, on the first click, only styles are removed, ...

jqueryhtmlcss

What is the process for defining a distinct column for a specific enum in both mysql and laravel?

In my table, I am creating a time schedule from Sunday to Saturday. I need to generate a unique key for the time slot of 9 am on Sunday, but I also want to reuse the same time slot for another day within the same table. For instance: day |time Su ...

phphtmlmysqllaraveltime

Match the test choices with the corresponding `radio` buttons

Looking for help with my quiz application. How can I align text vertically with radio buttons? Take a look at the code here on Codepen. One issue I'm facing is the alignment of long label texts, particularly in questions 9, 12 & 14. I've tried va ...

javascriptjqueryhtmlcssjquery-ui

The size of jVectorMap is displayed too diminutive

Why isn't my jVectorMap adjusting to the new height I've specified for the containing div? It only displays at the default height of 54px. Within a document.ready function in my scripts.js file, I have the following code: $('#team-map-usa& ...

javascriptjqueryhtmlcssjvectormap

Setting the CSS background-position to be fixed relative to its parent element

I have a question that may be a bit challenging. I'm not entirely sure if it's possible, but I feel like I remember seeing or doing something similar in the past. I am currently working on creating a horizontal menu using a div block sized 980x36 ...

cssimagebackgroundpositionfixed

Firefox does not display the line headings on the sides

Hey everyone, I'm facing a compatibility issue with CSS and Firefox today. When I go to my website www.fashoop.com, you'll notice some header lines on the sides. Here's an example in Google Chrome: (GOOGLE CHROME EXAMPLE) COLOR BLUE AN ...

css

The functionality of the Bootstrap carousel seems to be malfunctioning

I'm currently struggling to center the content in my Bootstrap carousel on my website. I attempted using Grid, but it didn't yield the desired outcome. How can I address this issue? Below, you will find my code and an accompanying image for refer ...

cssbootstrap-4

Using the CSS overflow scroll property with Bootstrap

I am attempting to resize Section A in Column 1 to match the height of the row. 1 row, 2 columns: +---------------------+---------------------+ | Column 1 | Column 2 | | | | | +--------------- ...

cssbootstrap-4

Troubleshooting problem with Bootstrap 4 carousel for displaying multiple items

Recently, I've been experimenting with Bootstrap 4 carousels and came across a helpful code tutorial that caught my interest. You can check it out at this link. My goal was to prevent the carousel from continuously cycling through the same slides and ...

jquerycsstwitter-bootstrapbootstrap-4carousel

What is the best way to ensure a flexbox image item keeps its aspect ratio?

After exploring numerous questions and answers, it seems that most discussions on flexbox aspect ratio involve using <div> elements instead of <ul><li>. However, I am struggling to find a solution to my specific issue. When utilizing < ...

htmlcssflexbox

I successfully created an animation with jQuery for an image, but unfortunately, it seems to malfunction during the second

$( "#btn1" ).click(function() { var $this = $(this); var clickCount = ($this.data("click-count") || 0) + 1; $this.data("click-count", clickCount); if (clickCount%2 == 0) { $("#img1").hide('clip').animate({ margi ...

jqueryhtmlcssanimation

Having trouble with Fancybox loading images from an external URL?

Here is an example of functioning HTML code: <a class="fancybox-gallery" href="http://sale.coupsoft.com/uploads/938218/logo.png"> <img class="animate scale animated" src="http://sale.coupsoft.com/uploads/938218/logo.png" alt="Image1"> ...

javascriptjqueryhtmlcss

What is the reason behind Jquery targeting only the initial div element?

I am attempting to use the "replace" method in jQuery to eliminate all non-numeric characters within a div. However, I have found that the replace function in jQuery is only impacting the first element it encounters. Below is the snippet of my jQuery cod ...

javascriptjqueryhtml

Angular static dropdown option

<input [formControl]="twitterHandle" id="twitterHandle" placeholder="twitterHandle"> Fetching the input value from the Twitter handle input field using the following code: twitterHandle = new FormControl(); this.twitterHandle.value; Similarly, if ...

htmlangular

Is it possible to dynamically change the color of a box shadow using an event handler?

I'm currently in the process of developing an application that consists of six distinct topics organized within a flexbox structure, complete with a box-shadow effect. My objective is to dynamically alter the color of the box-shadow through an event ...

javascriptjqueryhtmlcss

When a height is specified in percentage, the Tbody element does not display correctly on the entire page

Hey there! Currently, I am working on a fixed header table. My goal is to create a table where the tbody section expands with the screen size and I would like to set the height in percentage (%) but unfortunately it doesn't seem to be functioning as e ...

htmlcsshtml-table

Align text to the center within the dropdown menu for all web browsers

Is it possible to center align text in a select drop down for all browsers? It appears centered in Firefox, but shifts to the left in Chrome and Safari. CSS: .challenge{ max-width: 850px; width: 98%; height: 50px; background: #ffffff; margin: 3 ...

htmlcssdrop-down-menucross-browser

What are the steps to resize a YouTube embedded video?

I am currently attempting to use a YouTube video as the background for breadcrumbs on my website. However, I am facing an issue with setting the video width to cover the full screen. The image below shows that the video is displayed in the center of the if ...

htmlcssvideoiframeembed