Question

我正在尝试通过使用静态内容使Oracle Apex卡中的中心对齐。我的问题是对齐方式不正确，卡大小不相等。

我的HTML代码：

<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>

问题说明：

Answer 1

在“卡片”外部创建一个div，并在CSS下方使用：

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

Answer 2

在弹性容器中添加卡

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

并将其添加到您的CSS

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

Answer 3

卡片容器应为：

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

对齐项目：拉伸将使卡片具有相同的高度。

填充将在容器的顶部和底部添加空间。基本上，它将决定每张卡的高度。

Answer 4

我已经进行了一些更改，或者可以为body赋予属性，但这会影响每个页面，因此请添加外部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>

如何将相同尺寸的卡片对准中心？

4 个答案: