内联块div的最后一行向右移动

Question

我搜索了搜索关于这个问题的搜索结果，我无法修复它。

这真的非常烦人，让我发疯了！

我有一个由几个块组成的菜单。这些是由带有display：divline-block

的div创建的

我也试过浮动：左，但我需要这些全部集中在屏幕上，这不起作用。

使用我的内联块，它可以正常工作并通过制作更多行来调整屏幕大小 - 但最后一行总是偏移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和我有点不同，如：

＆＃13;

＆＃13;

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;
      }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;