I need help centering a group of articles within a container. I've been using the helper class center-block along with the CSS property float: none; on the container, but it hasn't been working to center the articles. I also tried placing center-block directly inside the col-md-10 article containers, which created an unwanted triangular effect.
Can someone advise me on how to properly center the article divs and point out what I might be doing wrong?
<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;
}
Current output:
https://i.sstatic.net/gVJ2p.png
Desired output:
https://i.sstatic.net/ttBo1.png
JSFiddle: https://jsfiddle.net/rx9ohzg3/1/