尝试居中一组col md-10 div，但不居中

Question

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

<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的元素中，以将其右移一列，从而使其居中。(12列总宽度减去10，DIV = 2，左侧和右侧除以2=1列，左侧应为空)

你可以在这个代码中看到它，它包含与你的小提琴相同的代码，只是(几乎)添加了那个offset类：

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

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