对齐表格中的表格单元格答案

【问题标题】：Align table-cells in a table对齐表格中的表格单元格
【发布时间】：2022-11-28 15:08:41
【问题描述】：

抱歉这个愚蠢的问题，但我对 CSS 很陌生。我正在尝试将两个元素与 display: table 并排对齐。

然而，右边的元素莫名其妙地（对我来说）比左边的元素更多地位于底部。

.container {
  content: "";
  display: table;
  clear: both;
  margin-left: 10%;
  margin: 0 auto;
  /* width: auto;
        height: auto; */
  vertical-align: middle;
  border-radius: 5px;
  border: 5px solid #ff656c;
  height: auto;
  padding: 0 20px;
  width: inherit;
}

#column1 {
  display: table-cell;
}

#column2 {
  display: table-cell;
  width: 50%;
}

#scope {
  width: 100%;
  padding-right: 5px;
}

<div class="container">
  <div id="column1">
    <img id="scope" src="https://cdn.pixabay.com/photo/2018/07/08/19/59/blood-pressure-3524615_960_720.jpg">
  </div>
  <div id="column2">
    <h2>Welcome to PATHFINDER</h2>
    <p>For people with heart failure, GPs are crucial in initiating and optimising dosages of recommended medications
    </p>
    <p>The National Heart Foundation of Australia and the Cardiac Society of Australia and New Zealand published guidelines that outline the goal of pharmacological therapy for persons with heart failure with reduced ejection fraction (HFrEF), and how to
      up-titrate these medicines.</p>
    <p>PATHFINDER aims to provide assistance to GPs to identify the most appropriate medicines and dosages for each patient</p>
  </div>
</div>

我尝试使用我用于放入两列的表单的相同代码，并查看盒子模型中是否存在任何问题，但我真的无法解决这个问题......

任何帮助深表感谢！

【问题讨论】：

使用 flex 而不是 table - 这将帮助您并排对齐项目。
您可以将 vertical-align 附加到 #column2 作为 vertical-align: top; 或 vertical-align: middle;。不过，我想知道为什么您需要 table 布局来处理这个特定示例。因为还有其他现代替代品，如 flex 或 grid 用于通用布局目的。

标签： css alignment

【解决方案1】：

我建议你使用flex

但是如果你想保持你的方式，你可以将 vertical-align: top 或 vertical-align: middle 属性添加到你的 column2 ID

【讨论】：