html - 内联 block div 的最后一行右移

Question

我已经在 SO 上搜索并搜索了有关此问题的信息，但我无法解决它。

这真的非常烦人，快把我逼疯了!!

我有一个由几个 block 组成的菜单。这些是由带有 display: inline-block 的 div 创建的

我也试过 float:left，但我需要这些都在屏幕上居中，但这是行不通的。

使用我的内联 block ，它工作正常并通过增加行来调整屏幕大小 - 但最后一行总是偏移 2 个像素!

这是我的代码和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>
<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>
<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>
<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>
<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>
<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>


.menublock {
width: 170px;
height: 150px;
margin: 0px;
padding: 0px;
display: inline-block;
background: #0074bc;
color: #fff;
cursor: pointer;
vertical-align: top;
}

.menublock-inner {
padding-top: 30px;
}

结果是……

Answer 1

看看这个旧链接总能吸引我:

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

所以我的 id 有点不同，比如:

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">
          <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 -->
  <!-- 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 -->