Javascript 如何将卡片末端的项目垂直居中对齐（使用引导4）？

我有一张长长的引导卡，上面有两行信息，一个标题和描述。然后我想要一个按钮，对准这张卡的右边，居中。按钮的当前html如下所示：

<div class="card card-body">
  <h4>I'm a Card</h4>
  <p>The button should be central, at the end of this card.</p>
  <input type="button"
        class="btn btn-outline-primary align-self-end"
        value=".align-self-end">
</div>

我是一张卡片
该按钮应位于该卡末尾的中央

代码笔：

---

如您所见，按钮位于卡的底部，导致其高度增加。我如何确保它始终位于卡的末端、中心，并且不会增加卡的高度？谢谢

将

弹性方向：行

添加到卡中，为内容添加一个容器，然后在按钮上将

对齐自端

更改为

对齐自中心

.mycard{
弯曲方向：行！重要；
证明内容：之间的空间；
}

我是一张卡片

该按钮应位于该卡末尾的中央。

将

弹性方向：行

添加到卡中，为内容添加一个容器，并在按钮上将

对齐自端

更改为

对齐自中心

.mycard{
弯曲方向：行！重要；
证明内容：之间的空间；
}

我是一张卡片

该按钮应位于该卡末尾的中央。

中的消息已经告诉了您答案。很抱歉，我不明白您的意思，您可以更改代码笔来告诉我您的意思吗？谢谢。“我的卡体是显示：flex，flex方向：column”。只需从中提取设置。我已尝试将flex direction更改为row，但似乎没有任何更改？我在您的代码笔页面上没有看到任何CSS设置。
中的消息已告诉您答案。很抱歉，我不明白您的意思，您是否可以更改代码笔以向我展示您的意思？谢谢。“我的卡体是显示：flex，flex方向：column”。只需从中提取设置。我已尝试将flex direction更改为row，但似乎没有任何更改？我在您的代码笔页面上没有看到任何CSS设置。谢谢，这正是我想要的-是否有可能在之后更改按钮的填充/边距等？没有必要将
柔性方向更改为
行
。事实上，这几乎就到了-唯一的问题是当你进入整页时，当卡片宽度增加时，它不会停留在右手边？添加了
调整内容：间距
解决了这个问题谢谢，这正是我想要的-是否可以在之后更改按钮的填充/边距等？没有必要将
弯曲方向更改为
行
。事实上，这几乎就到了-唯一的问题是当你进入整页时，当卡片宽度增加时，它不会停留在右手边？添加了
调整内容：间距解决了这个问题