浮动div底部的对齐按钮

Question

我有一个带有磁贴的概述页面，并且使用matchheight库动态确定一行的高度。 现在，我想将div底部的“更多”按钮对齐，以使其看起来不像较小屏幕上的屏幕截图那样混乱。

我尝试将按钮“位置：绝对”设置为“底部：20px”和“左侧：40％”，但这会导致响应问题。 在某些分辨率上还可以，但在其他分辨率上，按钮距离右侧太远。

我能否以一种不错的方式解决此问题，而不必为每个分辨率使用media属性？

 /* Block: Overview */ #overview { padding-top: 50px; width: 100%; } .overview { text-align: center; padding-bottom: 50px; } .overview img { width: 100%; vertical-align: middle; padding-bottom: 30px; } .card-title { text-align: center; letter-spacing: -1px; font-weight: 600; font-size: 20px; } .card-subtitle { margin-bottom: 0; font-style: italic; font-weight: 400; font-size: 15px; font-family: "Lora", serif; color: #cccccc; margin-top: -1rem; line-height: 1.7857; padding-bottom: 1rem; text-align: center; } .btn-card { background-color: #cccccc; border-color: #404040; color: #404040; letter-spacing: 2px; padding: 10px 20px; horiz-align: center; position: relative; margin-bottom: 0; } .btn-card:hover { background-color: #ffffff; color: #404040; border-color: #404040; letter-spacing: 2px; padding: 10px 20px; } 

 <div class="col-sm-3 overview row-eq-height"> <div class="col-sm-12 text-center wow fadeInLeft"> <img alt="Heavy Entertainment Show" src="/images/discography/the-heavy-entertainment-show-1.jpg"> </div> <h3 class="card-title">Heavy Entertainment Show</h3> <h4 class="card-subtitle">November 4<sup>th</sup>, 2016</h4> <a href="/album/the-heavy-entertainment-show/" title="Show details of Heavy Entertainment Show"> <button class="btn btn-card">MORE</button> </a> </div> <div class="col-sm-3 overview row-eq-height"> <div class="col-sm-12 text-center wow fadeInLeft"> <img alt="Under the Radar Vol 1" src="/images/discography/under-the-radar-vol-1-1.jpg"> </div> <h3 class="card-title">Under the Radar Vol 1</h3> <h4 class="card-subtitle">December 1<sup>st</sup>, 2014</h4> <a href="/album/under-the-radar-vol-1/" title="Show details of Under the Radar Vol 1"> <button class="btn btn-card">MORE</button> </a> </div> <div class="col-sm-3 overview row-eq-height"> <div class="col-sm-12 text-center wow fadeInLeft"> <img alt="Swings Both Ways" src="/images/discography/swings-both-ways-1.jpg"> </div> <h3 class="card-title">Swings Both Ways</h3> <h4 class="card-subtitle">November 18<sup>th</sup>, 2013</h4> <a href="/album/swings-both-ways/" title="Show details of Swings Both Ways"> <button class="btn btn-card">MORE</button> </a> </div> <div class="col-sm-3 overview row-eq-height"> <div class="col-sm-12 text-center wow fadeInLeft"> <img alt="Take the Crown" src="/images/discography/take-the-crown-1.jpg"> </div> <h3 class="card-title">Take the Crown</h3> <h4 class="card-subtitle">November 2<sup>nd</sup>, 2012</h4> <a href="/album/take-the-crown/" title="Show details of Take the Crown"> <button class="btn btn-card">MORE</button> </a> </div> 

Answer 1

这是正确的解决方案，添加了“ transform：translateX（-50％）;” 对齐。 谢谢您的帮助！

 .btn-card { background-color: #cccccc; border-color: #404040; color: #404040; letter-spacing: 2px; padding: 10px 20px; position: absolute; bottom: 0; left: 50%; transform:translateX(-50%); margin-bottom: 20px;