将元素与使用 display: table 的容器底部对齐

Posted 2023-03-05

【中文标题】将元素与使用 display: table 的容器底部对齐

【英文标题】：Align element to bottom of container that uses display: table

【发布时间】：2014-09-04 11:10:24

【问题描述】：

我有 3 个盒子，它们需要具有相同的高度和不同的内容。我正在使用 display: table 来实现这一点。我需要将按钮垂直对齐到容器的底部。按钮宽度也可以改变。我无法成功让 vertical-align: bottom 正常工作。

http://codepen.io/simply-simpy/pen/kBaHt

<div id="cta-3-col" class="cta-3-col">
    <div class="container">
        <div class="cta">
            <figure>
                <img src="http://lorempixel.com/200/100/" >
                    <figcaption>
                        <h2>CTA 1</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p>
                    </figcaption>
            </figure>
            <a href="#" class="btn " role="button">Follow<i></i></a>
        </div>
        <div class="cta">
            <figure>
                <img src="http://lorempixel.com/200/100/" >
                    <figcaption>
                        <h2>CTA 2</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt magna aliqua sed do edunt ut labore et dolore magna aliqua. </p>
                    </figcaption>
            </figure>
            <a href="#" class="btn" role="button">Partner With Us<i></i></a>
        </div>
        <div class="cta">
            <figure>
                <img src="http://lorempixel.com/200/100/" >
                    <figcaption>
                        <h2>CTA 3</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                    </figcaption>
            </figure>
            <a href="#" class="btn" role="button">Learn<i></i></a>
        </div>
    </div>
</div>

.cta 
    background: #fff;
    display: table-cell;
    width: 270px;
    padding: 0 0 30px;
 
.cta-3-col 
    background: gray;
    text-align: center;
    border-spacing: 10px;
   
 .container 
    display: table;
    width: 1000px;
    margin: 0 auto;
  
.btn 
    background: blue;
    color: #fff;
    padding: 10px;

【问题讨论】：

我认为添加“position:relative;”会容易得多到容器，然后使用“位置：绝对；”到您的底部 px 值的按钮

@AlvaroMenéndez -- 按钮需要居中，并且宽度可变。所以，我不确定在这种情况下效果如何。

现在我使用绝对位置方法和jQuery来设置偏移量。如果有人有更好的方法（仅使用 CSS），请告诉我。

你不能将 Partner 包装在 DIV 中并进行文本对齐除了相对表格单元格的绝对位置之外的中心？

【参考方案1】：

您只需在现有类中更改/添加一些 CSS 属性，而无需添加额外的标记：

http://codepen.io/anon/pen/rFmxa

CSS：

.cta 
  background: #fff;
  display: table-cell;
  width: 270px;
  /*padding: 0 0 30px;*/
  padding: 0 0 4em;
  position: relative;


.cta-3-col 
  background: gray;
  text-align: center;
  border-spacing: 10px;


.container 
  display: table;
  width: 1000px;
  margin: 0 auto;


.btn 
  background: blue;
  color: #fff;
  padding: 10px;
  position: absolute;
  bottom: 0;
  margin-bottom: 1em;
  left: 50%;
 -webkit-transform: translateX(-50%); 
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%); 
 -o-transform: translateX(-50%);
 transform: translateX(-50%);

【参考方案2】：

这是更新后的CodePen。

大部分更改是将position:relative; 修饰符添加到.cta 类，然后为.btn 类提供以下规则：

  position:absolute;
  bottom:5px;
  left:50%;
  -moz-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  transform: translateX(-50%);

这应该会为您解决问题。

【参考方案3】：

.cta 
    background: #fff; 
    display: table-cell;
    width: 270px;
    padding: 0 0 40px;
    position:relative;
 
.btn 
    background: blue;
    color: #fff; 
    padding: 10px; 
    position:absolute; 
    left:50%; 
    bottom:0; 
    -webkit-transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -o-transform: translateX(-50%); 
    transform: translateX(-50%);

【参考方案4】：

看看修改后的代码，没有复杂的转换翻译属性，它可以在包括 ols IE 在内的所有浏览器中运行！

相对于其他方法的优势：高效、快速、跨浏览器、简单！

代码笔YourSolution

修改后的css

---

 .cta 
        background: #fff;
        display: table-cell;
        width: 270px;
        padding: 0 0 30px;
        position:relative;
    

    .cta-3-col 
        background: gray;
        text-align: center;
        border-spacing: 10px;
        .container 
            display: table;
            width: 1000px;
            margin: 0 auto;
        
    

    p 
        margin:10px 0px 40px 0px;
    

    a.btn 
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0px;
        width: 64px;
        margin: auto;
        background: blue;
        color: #fff;
        padding: 10px;
    

【讨论】：

这不起作用，因为按钮必须是灵活的宽度。

【参考方案5】：

您只需要在下面添加额外的 css，它就会按照您的要求显示您的 html：

- .cta position:relative;
- .btn position:absolute;left:45%;bottom:0px;