试图将一堆 col-md-10 div 居中但不居中

Question

我正在尝试将容器内的一堆文章居中。我目前在容器上使用辅助类 center-block 和 css float: none;，但它没有居中。我试图将center-block 放在实际的col-md-10 文章容器中，但这会导致类似三角形的效果。

如何使文章 div 居中，我做错了什么？

<template>
  <div class="articles">
    <h1 v-text="title"></h1>
    <div v-if="Object.keys(articles).length !== 0" class="center-block">
      <div v-for="article in articles" class="col-md-10 article-border">
        <h1 v-text="article.title"></h1>
        <img :src="article.image" class="pull-left img-responsive margin10 thumb img-thumbnail">
        <p v-text="article.content">
        </p>
        <a class="btn btn-success pull-right marginBottom10" :href="article.url">Continue Reading..</a>
      </div>
    </div>
    <div v-else>No Articles Found!</div>
  </div>
</template>

...

.center-block {
    float: none;
}

当前输出：

所需的输出：

JSFiddle：https://jsfiddle.net/rx9ohzg3/1/

Answer 1

要使用 Bootstrap 提供的方法，请使用相应的 offset 类：将 offset-md-1 类添加到具有 col-md-10 的元素中，将其向右移动一列，从而居中。 （DIV = 2 的 12 列总宽度减去 10，左右除以 2 = 1 列，左侧应为空）

您可以在这个 codepen 中看到它，它包含与您的小提琴相同的代码（几乎）只添加了偏移类：

https://codepen.io/anon/pen/jaKege

注意：我还将按钮的 pull-right 类替换为 float-right 类，因为在 Bootstrap 4 中删除了 pull-right