I have recently constructed an element for a webpage within the site I am developing. The item is complete, but I am struggling to center it on the page properly. While I can easily center the image, the text associated with it refuses to budge.
Here is the HTML code:
<article class="col-sm text-center">
<a href="https://www.google.com/">
<img style="border-radius: 5px;" width="400" height="561" src="https://i.imgur.com/kE1WrzV.png" alt="Image" loading="lazy" />
</a>
<div style="margin-top: 2%;" class="container-fluid">
<div class="row center-block">
<h6 class="animestyle-title"><a class="animestyle-a" href="{{ request.path }}{{obj.mNameEN}}">This is a test (Some more test)</a></h6>
</div>
<div class="row center-block" style="max-width:80%;">
<div>
<a href="/category/{{ cat.mCategoryName }}" class="animestyle-option animestyle-a">Category 1</a>
<i style="color: #7d7d7d;" class="stylebullets fa fa-circle"></i>
<a href="/category/{{ cat.mCategoryName }}" class="animestyle-option animestyle-a">Category 2</a>
<i style="color: #7d7d7d;" class="stylebullets fa fa-circle"></i>
<a href="/category/{{ cat.mCategoryName }}" class="animestyle-option animestyle-a">Category 3</a>
<i style="color: #7d7d7d;" class="stylebullets fa fa-circle"></i>
<a href="/category" class="animestyle-option animestyle-a">...</a>
</div>
<div>
<i style="color: #7d7d7d;" class="stylebullets fa fa-circle"></i><span class="animestyle-option">12 items</span>
</div>
</div>
</div>
</article>
</div>
And here is the CSS:
.animestyle-title {
font-family: Montserrat !important;
text-align: center !important;
}
.animestyle-a {
text-decoration: none !important;
color: #3E3E3E !important;
transition: all .3s !important;
}
.animestyle-option {
color: #7d7d7d !important;
}
.stylebullets {
font-size: 4px !important;
display: inline-block !important;
vertical-align: middle !important;
margin-left: 5px;
margin-right: 5px;
}