如何将按钮中的文字对齐到底部?
我尝试在我的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>
由于某些原因,引导程序无法在代码段中使用
答案 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。数字很小就可以了。
0
&#13;
.img-panel span.button-title
&#13;
答案 2 :(得分:0)
尝试添加此内容:
<style>
span{
position: absolute;
bottom: 0;
}
</style>
在html标记中添加:
<span>Hello</span>
答案 3 :(得分:0)
您可以在按钮(此处为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>
答案 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