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

时间:2016-07-15 11:09:02

标签: html css twitter-bootstrap

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

我尝试在我的CSS中设置line-heightvertical-align: bottom;,但都没有效果。

更新

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

代码:

.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>

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

6 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

请参阅bottom规则。

更新

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

&#13;
&#13;
0
&#13;
.img-panel span.button-title
&#13;
&#13;
&#13;

答案 2 :(得分:0)

尝试添加此内容:

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

在html标记中添加:

<span>Hello</span>

答案 3 :(得分:0)

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

由于按钮为position: relativespan 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>

答案 4 :(得分:0)

试试这个

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

答案 5 :(得分:0)

如果按钮的高度为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