How to align cards to the center with the same size?

Question

I am trying to align to the center in Oracle Apex cards by using the static content. My issue is that the alignment is not correct and the card sizes are not equal.

My HTML code:

<head>
    <style>
        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            transition: 0.3s;
            width: 15%;
            float: left;
            margin-left: 10px;
        }

        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }

        .container {
            padding: 12px 18px;
        }
    </style>
</head>

<body>
    <div class="card"><img src="ex1" alt="ex1" style="width:100%">
    <div class="container">
        <h4>
            <p style="text-align:center;">
                <font size="2">
                   <a href="ex1 website" target="_blank">
                        <b>ex1</b>
                    </a>
                </font>
            </p>
        </h4>
    </div>
</div>
<div class="card">
    <img src="ex2" alt="ex2" style="width:100%"/>
    <div class="container">
        <h4>
            <p style="text-align:center;">
                <font size="2">
                    <a href="ex2 website" target="_blank">
                        <b>ex2</b>
                    </a>
                </font>
            </p>
        </h4>
    </div>
</div>
</body>

Issue illustration:

If you want the items to have space on their left/right sides, use `justify-content: space-around;` instead of `justify-content: center;` — Asons, Apr 24 '19 at 09:35
Take a look at [this example](https://stackoverflow.com/a/55826963/3013279) — GuCier, Apr 24 '19 at 09:39

jitu thakur · Answer 1 · 2019-04-24T08:43:55.627

1

Create one div outer of the "card" and use below CSS:

.card{
    display: flex;
    align-items: center;
    justify-content: center;
}

edited Apr 24 '19 at 08:43

answered Apr 24 '19 at 08:15

jitu thakur

740
3
8

it will not work as per required result. – Amarjit Singh Apr 24 '19 at 09:25

sai m · Answer 2 · 2019-04-24T09:12:18.163

0

add cards inside flex-container

<div class="flex-container">
 <div class="card"></div>
 <div class="card"></div>
</div>

and add this to your CSS

<style>
.flex-container{display: flex;justify-content: space-around;background:#fff;}
</style>

edited Apr 24 '19 at 09:12

answered Apr 24 '19 at 08:58

sai m

1
1

This will only horizontally align the items; they will not be in the centre vertically. – James Whiteley Apr 24 '19 at 09:17
Try adding `vertical-align: middle;`. – Jack Bashford Apr 24 '19 at 09:18
you have to add `align-self:center;` to card. it will resolve the issue. check my answer above. Thanks – Amarjit Singh Apr 24 '19 at 09:26

Rannie Aguilar Peralta · Answer 3 · 2019-04-24T09:54:19.497

0

Cards container should be:

.container {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: 50px 0;
}

align-items: stretch will make cards to have the same height.

padding will add space to the top and bottom of container. Basically it will dictate the height of each cards.

edited Apr 24 '19 at 09:54

answered Apr 24 '19 at 09:22

Rannie Aguilar Peralta

1,566
14
19

it will not work as per required result. please do practical for same. – Amarjit Singh Apr 24 '19 at 09:25

score 0 · Answer 4 · answered Apr 24 '19 at 09:23

I have done some changes, either you can give properties to body but that will effect on every page so add an outer div.

html{
height: 100%;
}
body{
margin:0;
padding:0;
min-height:100%;
}
.card-outer{
  display:flex;
  justify-content: center;
  min-height: 100vh;
}
.card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            transition: 0.3s;
            width: 15%;
            float: left;
            margin-left: 10px;
            align-self: center;
        }

        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }

        .container {
            padding: 12px 18px;
        }

<head>
    <style>
        
    </style>
</head>

<body>
<div class="card-outer">
    <div class="card"><img src="ex1" alt="ex1" style="width:100%">
    <div class="container">
        <h4>
            <p style="text-align:center;">
                <font size="2">
                   <a href="ex1 website" target="_blank">
                        <b>ex1</b>
                    </a>
                </font>
            </p>
        </h4>
    </div>
</div>
<div class="card">
    <img src="ex2" alt="ex2" style="width:100%"/>
    <div class="container">
        <h4>
            <p style="text-align:center;">
                <font size="2">
                    <a href="ex2 website" target="_blank">
                        <b>ex2</b>
                    </a>
                </font>
            </p>
        </h4>
    </div>
</div>
</div>
</body>

How to align cards to the center with the same size?

4 Answers4