CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Vedant Agarwala
Vedant Agarwala

Reputation: 18819

Align text to bottom in a button and in front of background

How can I align the text in the button to the bottom?

I tried to set line-height and vertical-align: bottom; in my CSS but neither worked.

UPDATE:

Also, I want the text to be in front of the background. I have set back gradients in the normal, hover and active states, so I my white text to be in front of that.

Code:

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

For some reason bootstrap is not working in the code snippet

Upvotes: 0

Views: 226

Answers (6)

tzi
tzi

Reputation: 9459

You can create a child element in your button (here a span) that you position to the bottom of the button.

Because the button is position: relative, the span with position: absolute will be position according to the button.

We also create a child element to display the background, via the ::before pseudo-element selector. To resolve which child will be display on top, between two position: absolute elements, the browser use the HTML/DOM order. So a ::before element will be displayed below the others, while a ::after will be displayed on top. You also can force the stacking order with the z-index property.

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

Upvotes: 1

Sofia Ferreira
Sofia Ferreira

Reputation: 39

You could use vertical-align: bottom; but to do this you need to apply a display:table to the container and display:table-cell to the button and give him some specific height.

Take a look to this examples: http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html

Upvotes: 1

beerwin
beerwin

Reputation: 10327

Place your button text in a span, give it absolute positioning and set bottom to 0:

See the .img-panel span.button-title rule.

Update:

To place the text above the background, just add a higher z-index for the button text. A low number will do it.

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

.img-panel span.button-title {
  position: absolute;
  bottom: 0;
  z-index: 10;
}
<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')">
      <span class="button-title">Hello</span>
    </button>
  </div>
</div>

Upvotes: 0

BENARD Patrick
BENARD Patrick

Reputation: 30975

If your button's height is 300px, you can try with a padding-top property :

CSS:

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

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

Upvotes: 0

vignesh
vignesh

Reputation: 1011

Try this

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

Upvotes: 0

Pranjal
Pranjal

Reputation: 1118

Try adding this:

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

And in html markup add:

<span>Hello</span>

Upvotes: 0

Related Questions