Putting A Text And Image Side By Side With Aligning The Text To The Bottom

Im trying to put a text and an image side by side, but the text have to be aligned at the bottom but nothing is working, im using twitter-bootstrap and this is the code:

Solution 1:

You'll need to make a few changes to HTML and CSS:

• Move span to before the image in HTML
• Remove float: right; from the span in CSS
• Add display: inline-block; to the span in CSS

img {
  display: inline-block;
  margin-bottom: 40px
  margin-left: 10px;
}
span {
  display: inline-block;
  vertical-align: bottom;
}

<table>
  <tr>
    <td width="75%" style='padding-top: 50px'  height="100%"  >
      <span>test</span>
      <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwwMDQwMDA0MDAwMDAwMDAwMDA8MDAcMFBEWFhQRFBQYHCggGBolJxQUITEhMSkrLi4uFx8zODMsNyg5OjcBCgoKDA0NDwwMDysZFBkrLCsrLCwrLCsrKysrLDcsKysrKys3LCsrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAOEA4QMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH/8QAFhABAQEAAAAAAAAAAAAAAAAAAAER/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAMAwEAAhEDEQA/AOI1AbUAAAAABAUAAEUAEUBAUEUARRAUAAAAADAALFQAAARQAABFAQAAABUAFQABQAAAAAAAAFAKgACKgKgoAICoAKIAAAAAAAAACoAACiKAABogCgAAAAAIAAAAAAAgEKAAKAAqACiKAIoAAIqAKAAACAAAAAAAAAIgAoACgCIAKoACgAigCAAoACAgqKlUABABAAAAAAAAAAFAFABBRBRQARUUAAAABKqAACACAAAAAAAAoAIoAAAAAoKiggALQQFAARUAAQAAABAAAAABQARQAABQVFARQEVAFABFAEFQAAABEAFABAAAAAAAAAgCqAAKAIKAAAIoCCgIKgAAAAACIAAAAAKoAAoAgAKACAoAAAAIKAgqAAAAAAAACAAoAACgAACKCKAICgAAAAiooCKgCoAAAAAAAAAAoAAAAAAAAGgACgIAACAqKAAAgoCCgIqACoAAAoAIoAAAAAogCoooIKggAAAIoACKAAAACCgAIAoAAQChQFQVQABFAABBKQAKKAkFAZWACAAAALAAKoDIACgBVAEUFAAH/9k=" class="img-responsive "  width="60%" alt="">
    </td>
  </tr>
</table>

Solution 2:

Try clearing the float.

Check http://jsfiddle.net/w4ucrk2p/

Use this next to the image tag,

<div style="clear:both"></div>

EDIT :

If you want the text beside your image, include the span element first inside the <td> and then followed by the image. Like,

http://jsfiddle.net/qr18rLd6/

Share