中心内联块列表

Question

如何在 div 中将行内块居中？当下一行出现时，右边有一个看不见的边距，我似乎无法摆脱它。我该如何删除它？

https://gyazo.com/797bc2388bb1db8d6b474411478a57cb

我想将所有内联块完全居中。

.list {
  margin: 0px auto;
  height: 100%;
  width: 90%;
  background-color: gray;
}
.entry {
  display: inline-block;
  float: left;
  width: 225px;
  margin: 8px;
  box-shadow: 5px 5px 5px #888888;
}

<div class="list">

  <div class="entry">
    <button class="title btn btn-primary">Full Metal Panic!</button>
    <div class="description">Seventeen-year-old Sousuke Sagara, a sergeant working for Mithril, has been assigned to protect Kaname Chidori. He is ordered to join her high school class and be as close to her as possible to prevent her from falling into enemy hands, that is, if
      he can safely blend in with their fellow classmates without revealing his true identity.</div>
    <img src="http://cdn.myanimelist.net/images/anime/2/75259.jpg"></img>
    <button class="info info-episodes btn btn-primary">
      <div class="pull-left">EPISODES</div>24</button>
    <button class="info info-rating btn btn-warning">
      <div class="pull-left">RATING</div>R</button>
  </div>

</div>

Answer 1

对于 inline-block 个元素，您可以使用 text-align:center;

将它们垂直居中

关于边距 space，当一个元素是内联的时，它会自动为段落上的 space 个元素（如跨度或链接）留出边距。这就是那种显示器的行为方式。

有一些解决方法可以修复该边距，例如将父级的 font-size 设置为 0 或将 -4px 设为 margin-right。

CSSTricks 上解释了一些解决方法，Fighting the Space Between Inline Block Elements。

虽然display:inline-block非常简单，但有些人会建议您使用浮动元素来完善间距。在这种情况下，如果保证金问题不是很麻烦，那就去吧。

关于您的代码的一些事情：

试着把按钮列表变成...按钮列表，把它们包起来在 ul li 上（对于图像下方的按钮），它将是语义正确且样式更容易；
尽量不要在BUTTON里面使用DIV。 BUTTON 显示为内联，DIV 显示为块，您可以使用 SPAN 来设置一些文本块的样式。
由于描述是一段文字，您可以将其包装在 P 元素上，这在语义上会更好 (SEO)

Pen

中心内联块列表

Center inline-block list

html

css

center

block