Question

如何将按钮中的文字对齐到底部？

我尝试在我的CSS中设置line-height和vertical-align: bottom;，但都没有效果。

更新

另外，我希望文本在背景中在前面。我已经在normal，hover和active状态中设置了渐变，所以我的白色文字就在其前面。

代码：

.img-panel {
  position: relative;
  height: 300px;
  width: 100%;
  background-size: cover;
  color: white;
}

.img-panel:after {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}

.img-panel:hover:after {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}

.img-panel:active:after {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
  <div class="col-md-4 img-panel-container">
    <button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
      Hello
    </button>
  </div>
</div>

由于某些原因，引导程序无法在代码段中使用

Answer 1

您可以使用vertical-align: bottom;但要执行此操作，您需要将display:table应用于容器，display:table-cell应用于该按钮，并为其指定一定的高度。

看一下这个例子：http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html

Answer 2

将您的按钮文字放在一个范围内，给它绝对定位并将Size设为Button：

请参阅bottom规则。

更新

要将文本放在背景上方，只需为按钮文本添加更高的z-index。数字很小就可以了。

＆＃13;

.img-panel span.button-title

＆＃13;

Answer 3

尝试添加此内容：

<style>
span{
  position: absolute;
  bottom: 0;
}
</style>

在html标记中添加：

<span>Hello</span>

Answer 4

您可以在按钮（此处为span）中创建一个位于按钮底部的子元素。

由于按钮为position: relative，span position: absolute将根据按钮定位。

我们还通过::before伪元素选择器创建一个子元素来显示背景。要解决哪个子项将显示在两个position: absolute元素之间的顶部，浏览器将使用HTML / DOM顺序。因此，::before元素将显示在其他元素下方，而::after将显示在顶部。您还可以使用z-index属性强制执行堆叠顺序。

.img-panel {
  position: relative;
  height: 300px;
  width: 100%;
  background-size: cover;
}

.img-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, transparent 40%, black 100%);
}
.img-panel:hover::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 40%, black 100%);
}

.img-panel > span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: center;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
  <span>Hello</span>
</button>

Answer 5

试试这个

.img-panel {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

Answer 6

如果按钮的高度为300px，则可以尝试使用padding-top属性：

<强> CSS ：

.img-panel {
  position: relative;
  height: 300px;
  width: 100%;
  background-size: cover;
  color: white;
  padding-top:250px;
}

Bootply ：http://www.bootply.com/AHSl2MVDIy

将文本与按钮和背景前面的底部对齐

6 个答案: