CSS类对齐自我结束不起作用

Posted 2023-03-05

【中文标题】CSS类对齐自我结束不起作用

【英文标题】：CSS class align-self-end not working

【发布时间】：2018-07-21 00:50:00

【问题描述】：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3">
  <div class="card bg-dark text-white">
    <img class="card-img" src="http://via.placeholder.com/300x340" >
    <div class="card-img-overlay">
      <h5 class="card-title">Title</h5>
      <h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
      <div class="align-self-end">Text I want at bottom</div>
    </div>
  </div>
</div>

我无法通过将此类 align-self-end 应用于图像底部来获取最后一个 div 中的文本。我知道 flex 已应用于.card-img-overlay div，其方向为列，那么为什么我无法将 div 置于图像底部？

【问题讨论】：

您可以在此处阅读align-self 等的工作原理：***.com/questions/42613359/…

【参考方案1】：

card-img-overlay div 不是 display:flex。

您可以通过向其中添加d-flex flex-column 类来做到这一点，并使用mt-auto 将文本推到底部。

https://www.codeply.com/go/SRdCTDDoRr

<div class="card bg-dark text-white">
       <img class="card-img" src="http://via.placeholder.com/300x340" >
       <div class="card-img-overlay d-flex flex-column">
            <h5 class="card-title">Title</h5>
            <h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
            <div class="mt-auto">Text I want at bottom</div>
       </div>
</div>

【讨论】：

嗨，这行得通。但是你能告诉我为什么 align-self-end 不起作用吗？它向右而不是底部对齐。

这是explained here 和其他地方。基本上，您可以让align-self-end 与justify-content-between 一起工作，但您必须对卡进行更多重组。自动边距更容易。