Search code examples
htmlcssalignment

Align text from bottom of div

I need to align some text in a div with some spacing to the bottom of the div. How can I set the space (for example 10 or 20px) between the bottom of my div and my text ?

Here is the sample code:

.modultext {
    height: 50px;
    width: 300px;
    background: red;
	padding-top: auto;
	padding-bottom: 17px; <!-- Space from the bottom -->
}
<div class="modultext">Sample text</div>

Solution

  • You can use table-cell layout together with vertical-align property:

    .modultext{
  display:table-cell;
  vertical-align: bottom;
  height: 50px;
  width: 300px;
  background: red;
  padding-bottom: 17px; <!-- Space from the bottom -->
}
    <div class="modultext">Sample text</div>