How to center items inside a card

Asked Sep 17 '20 at 13:06

Active Sep 17 '20 at 13:07

Viewed 30 times

Hello I was wondering how can I center the content inside the card I tried d-flex and justify content with align content and items but it still isn't working i have a h-100 too so I'm not sure whats going wrong

Code:

<div class="col-lg-3 col-md-6 col-sm-12">
            <div class="card info-box-2 h-100" style="border-radius: 1.75rem;">
                <div class="body">
                    <div class="content"  style="justify-content: center; text-align: center; display: contents;">
                        <div class="image"><img src="https://www.flaticon.com/svg/static/icons/svg/1251/1251768.svg" alt="" width="25%"></div>
                        <div class="number"><span style="font-size:20px;">Leave Entitlements</span></div>
                            <div class="text">Manage Leave Entitlements for all registered users</div>
                            <div class="text"><a href="" class="btn btn-primary btn-simple btn-round">Entitlements</a></div>
                    </div>
                </div>
            </div>
        </div>

This is how it looks from the view also p.s I am using bootstrap for this

EDIT: Added the image description

edited Sep 17 '20 at 13:07

asked Sep 17 '20 at 13:06

Vit

are you using bootstrap ? – نور Sep 17 '20 at 13:07
Have you tried "margin: auto;"? – Mick Sep 17 '20 at 13:07
@AbdullahAlNoor Yes sorry i edited – Vit Sep 17 '20 at 13:07
@Mick yes i have but its stil lthe same – Vit Sep 17 '20 at 13:08
add `align-items-center` .. – نور Sep 17 '20 at 13:12
it's working.. check [link](https://codepen.io/noor007/pen/PoNdJGQ) – نور Sep 17 '20 at 13:14
@AbdullahAlNoor Hmm weird its not working for me might it be because its inside another div with a chart there? – Vit Sep 17 '20 at 13:29

How to center items inside a card

0 Answers0