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

Question

我有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;
}

Answer 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%);
}

Answer 2

看修改后的代码没有复杂的转换翻译属性，将工作在所有的浏览器，包括ols IE!

优于其他方法的优点:高效、快速、跨浏览器、简便!

Codepen 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;
    }

Answer 3

这是一个更新的CodePen。

更改的主要内容是在.cta类中添加position:relative;修饰符，然后在.btn类中添加以下规则:

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

这样你的问题就解决了。

Answer 4

.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%);
}

Answer 5

你只需要添加下面额外的css，它会显示你的html，你的要求:

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