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

Question

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

我如何使文章 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 将其向右移动一列，从而使其居中。 (12 列总宽度减去 10，对于您的 DIV = 2，除以 2 左右 = 1 列，左侧应保持为空)

你可以在这个代码笔中看到它，它包含与你的 fiddle 相同的代码，(几乎)只添加了那个偏移类:

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

注意:我还用 float-right 类替换按钮的 pull-right 类，因为 pull-right 在 Bootstrap 4