Topic: Center button on a card

wondernate pro asked 4 years ago


This may not be a MDB specific question but I can't seem to get the flex commands to respond.  So I am wondering if there is a conflict with MDB or just a different way to do it.   I am trying to get a button only to center on a card.  I have the H1 content centered and then the text or ul left aligned next and then at the bottom the button I want centered.   I saw there was one example but it centered everything on the card, the example I mean is the Image Overlay card example.    

Here is the code I am trying: 

<!-- Card content -->
<div class="card-body">

<!-- Title -->
<h4 class="card-title text-center">Centered Title</h4>
<!-- Text -->
<p class="card-text">
<ul>
<li>Left</li>
<li>Aligned</li>
<li>List</li>
</ul>
</p>
<!-- Button -->
<div class="mb-12 d-flex align-items-center">
<a href="#" class="btn btn-primary d-flex align-self-center">Center This Button</a>
</div>

</div>

Neither the align self on the button or the align items on the div work.  When I inspect the div it is expanded to 100% width inside the card so the button inside should have space to center.   

Can you tell me what I am missing? 


Marta Wierzbicka staff answered 4 years ago


Hi,

would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/? It will be easier for me to check out your code. I'll try to help you.

Best,

Marta



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: Chrom
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No