You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何使<article>内卡片行中的内容相互垂直对齐？

avatar
算力阿峰
2026-8-9
卡片内元素垂直对齐解决方案

问题背景

需要让<article>内卡片行中的所有元素实现垂直对齐，当前卡片布局混乱，尝试过将元素放入带display:flex和align-content:left的div中但无效。

原始代码

JSX代码 

<div className="user-card">
      <img
        className="avatar"
        src={`/assets/${user.homeTeam}.png`}
        alt={user.homeTeam}
      />
      <img
        className="avatar"
        src={`/assets/${user.awayTeam}.png`}
        alt={user.awayTeam}
      />
      <div className="info">
        <h3>
          {user.homeTeam} vs {user.awayTeam}
        </h3>
        <span style={{ margin: "1em" }}></span>
        <img
          alt=""
          src="/assets/calendar.svg"
          style={{ height: "40px", width: "40px" }}
        />
        <span style={{ margin: "0.5em" }}></span>
        <h3>{user.Date}</h3>
        <span style={{ margin: "1em" }}></span>

        <img
          alt=""
          src="/assets/stadium.svg"
          style={{ height: "40px", width: "40px" }}
        />
        <span style={{ margin: "0.5em" }}></span>
        <h3>{user.location} </h3>
        <span style={{ margin: "1em" }}></span>
        {/* <p>
          Score: {user.homeTeamScore} - {user.awayTeamScore}
        </p> */}
        <button class="button button-green width-auto">Book Ticket</button>
      </div>
    </div>

CSS代码 

.App {
  text-align: center;
  width: 95%;
  max-width: 800px;
  margin: 6rem auto 0;
}

.user-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

.button.width-auto {
  width: 130px;
  padding: 0 15px;
  max-width: none;
}
.button.button-green {
  background-color: #219f45;
}
[role="button"],
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}
.button {
  display: block;
  text-align: center;
  width: 100px;
  max-width: 130px;
  margin: 0;
  height: 45px;
  line-height: 45px;
  color: #fff !important;
  padding: 0;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.1s linear;
  font-family: EncodeSansExpanded-Bold, arial, tahoma;
}
.user-card {
  display: flex;
  padding: 1rem;
  text-align: left;
  margin-left: 1rem;
  margin-bottom: 0.5rem;
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
  width: 1200px;
  margin: 2em;
  border: 1px solid grey;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.user-card:hover {
  background-color: #0a0a0a;
}

.avatar {
  display: flex;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.info {
  align-items: center;
  display: flex;
  text-align: left;
  margin-left: 1rem;
}

.info h3,
.info p {
  align-items: center;
  margin-bottom: 0.5rem;
}
div {
  align-items: center;
  justify-content: left;
}
.user-post {
  max-width: 500px;
  width: 95%;
  margin: 0 auto;
}

.user-post h2 {
  margin: 1rem auto;
  color: white;
}

.user-post a {
  cursor: pointer;
  text-decoration: none;
}

.user-card__image {
  display: flex;
}

.user-post a:hover {
  color: #5dd4ac;
}

@media (max-width: 600px) {
  .user-container {
    grid-template-columns: 1fr;
  }
}

解决方案

修改后的JSX代码 

<div className="user-card">
  <img
    className="avatar"
    src={`/assets/${user.homeTeam}.png`}
    alt={user.homeTeam}
  />
  <img
    className="avatar"
    src={`/assets/${user.awayTeam}.png`}
    alt={user.awayTeam}
  />
  <div className="info">
    <h3>{user.homeTeam} vs {user.awayTeam}</h3>
    
    {/* 日期信息组 */}
    <div className="info-group">
      <img
        alt="calendar"
        src="/assets/calendar.svg"
        style={{ height: "40px", width: "40px" }}
      />
      <h3>{user.Date}</h3>
    </div>

    {/* 地点信息组 */}
    <div className="info-group">
      <img
        alt="stadium"
        src="/assets/stadium.svg"
        style={{ height: "40px", width: "40px" }}
      />
      <h3>{user.location}</h3>
    </div>

    <button className="button button-green width-auto">Book Ticket</button>
  </div>
</div>

修改后的CSS代码 

.App {
  text-align: center;
  width: 95%;
  max-width: 800px;
  margin: 6rem auto 0;
}

.user-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

.button.width-auto {
  width: 130px;
  padding: 0 15px;
  max-width: none;
}
.button.button-green {
  background-color: #219f45;
}
[role="button"],
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}
.button {
  display: block;
  text-align: center;
  width: 100px;
  max-width: 130px;
  margin: 0;
  height: 45px;
  line-height: 45px;
  color: #fff !important;
  padding: 0;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.1s linear;
  font-family: EncodeSansExpanded-Bold, arial, tahoma;
}
.user-card {
  display: flex;
  align-items: center; /* 卡片整体垂直居中 */
  padding: 1rem;
  text-align: left;
  margin: 2em auto 10px; /* 合并重复margin */
  width: 1200px;
  border: 1px solid grey;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.user-card:hover {
  background-color: #0a0a0a;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 0.5rem; /* 调整头像间距 */
}

.info {
  display: flex;
  flex-direction: column; /* 纵向排列内部模块 */
  align-items: flex-start; /* 左对齐 */
  gap: 1rem; /* 用gap控制模块间距 */
  margin-left: 1rem;
}

.info-group {
  display: flex;
  align-items: center; /* 组内元素垂直居中 */
  gap: 0.5rem; /* 组内元素间距 */
}

.info h3,
.info p {
  margin: 0; /* 移除默认margin避免间距混乱 */
}

/* 移除全局div样式，避免干扰布局 */
/* div {
  align-items: center;
  justify-content: left;
} */

.user-post {
  max-width: 500px;
  width: 95%;
  margin: 0 auto;
}

.user-post h2 {
  margin: 1rem auto;
  color: white;
}

.user-post a {
  cursor: pointer;
  text-decoration: none;
}

.user-card__image {
  display: flex;
}

.user-post a:hover {
  color: #5dd4ac;
}

@media (max-width: 600px) {
  .user-container {
    grid-template-columns: 1fr;
  }
}

关键修改说明

  1. 结构重构：将日期、地点相关元素分别放入.info-group容器，让每组成为独立flex单元，便于控制垂直对齐。
  2. flex布局调整：
    • .user-card添加align-items: center，确保卡片内所有子元素垂直居中。
    • .info改为flex-direction: column，内部模块纵向排列，用gap替代空span控制间距。
    • .info-group设置display: flex和align-items: center，保证图标与文字垂直对齐。
  3. 冗余样式清理：移除全局div样式（会干扰所有div布局），合并重复margin设置，移除h3默认margin避免间距混乱。
  4. 间距优化：用gap替代空span，布局更简洁易维护。

内容的提问来源于stack exchange，提问作者Marawan1805

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.09 01:50:24