时间戳

首页 > 解决方案 > 如何在卡片末尾对齐项目，垂直居中（使用引导程序 4）？

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>

代码笔： https ://codepen.io/Darlton29/pen/ZEbyNXe

如您所见，按钮位于卡片的底部，导致其高度增加。我怎样才能确保它总是在卡片的最后，在卡片的中心，并且不会增加卡片的高度？谢谢。

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

添加flex-direction: row到卡片，为内容添加一个容器，然后在按钮上更改align-self-end为align-self-center。

.mycard {
  flex-direction: row!important;
  justify-content: space-between;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card card-body mycard">
        <div>
          <h4>I'm a Card</h4>
          <p>
            The button should be central, at the end of this card.
          </p>
        </div>
        <input type="button" class="btn btn-outline-primary align-self-center" value="Button">
      </div>
    </div>
  </div>

推荐阅读