html - 如何使用 CCS 和 HTML 将三张卡片对齐在一行中?
问题描述
我正在建立一个网站,但我遇到了问题。当我试图将三张卡片排成一行时,它们停留在左侧。
HTML 代码:
<div class="row">
<div class="column">
<div class="card">
<h3 class="card-title">Ramndom1</h3>
<p class="card-text">hfejhgfjhejhfvhjhefgvfjhefvfvevjhfvfvejhvfvjhf</p>
</div>
</div>
<div class="column">
<div class="card">
<h3 class="card-title">Random2</h3>
<p class="card-text">fheguighefgheghhjfggfefgghf</p>
</div>
</div>
<div class="column">
<div class="card">
<h3 class="card-title">Random3</h3>
<p class="card-text">fhekfhejkfjhegfghfjhegbfjhfjhefgfehf</p>
</div>
</div>
</div>
CSS 代码:
.column {
width: 33%;
padding: 0 15px;
}
.row {
display: flex;
align-items: center;
justify-content: center;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
.card {
width: 450px;
height: 450px;
background: #8fb1ff 0% 0% no-repeat padding-box;
border-radius: 20px;
opacity: 1;
}
.card-title {
text-align: center;
font: normal normal bold 63px/84px Segoe UI;
letter-spacing: 0px;
color: #4a4949;
opacity: 1;
}
.card-text {
text-align: center;
font: normal normal bold 24px/32px Segoe UI;
letter-spacing: 0px;
color: #4a4949;
opacity: 1;
padding: 5px;
}
我无法使用此代码对齐它。可能是什么问题?我尝试使用 justify-content,但它没有用。我不知道我还能做什么。你能帮我解决这个问题吗?
解决方案
添加这个:
margin-left: auto;
margin-right: auto;
在.card
你的 CSS 中。
推荐阅读
- php - codeigniter sql备份在本地服务器上工作正常,但在现场显示错误
- python-3.x - 慢 matplotlib - 将图保存为 PNG
- r - 计算0到1之间的波动次数
- python - 在python中将本地时间戳转换为unix时代时间戳
- wildfly - 如何取消屏蔽已被 Elytrons mask 命令屏蔽的密码
- php - 在 PHP 中使用数据表制作复选框时,复选框的值始终为“打开”
- java - 我应该如何通过spring boot编写批量更新方法
- postgresql - PostgreSQL 子查询案例顺序扫描
- windows - 如何使用 CSV 文件(BAT 文件)中的 URL 列表正确创建循环
- angular - 如何从 forkJoin 返回数据