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

【问题标题】：Align element to bottom of container that uses display: table将元素与使用 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/" alt="">
                    <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/" alt="">
                    <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/" alt="">
                    <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 中并进行文本对齐除了相对表格单元格的绝对位置之外的中心？

标签： html css layout vertical-alignment

【解决方案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;}

【讨论】：