CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ex-Ex
Ex-Ex

Reputation: 176

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:

<td width="75%" style='padding-top: 50px'  height="100%"  >

     <img src="img/img.png" class="img-responsive " 
         style="display:inline-block;margin-left: 10px;float:right;margin-bottom: 40px"
                width="60%" alt="">
     <span style="vertical-align:bottom;float:right">test</span>

</td>

http://jsfiddle.net/zh1o6tuc/

Thanks.

EDIT: This is what im trying to achieve http://postimg.org/image/ss7u8u6mh/

Upvotes: 0

Views: 4313

Answers (2)

jqheart
jqheart

Reputation: 767

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/

Upvotes: 0

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

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>

Upvotes: 1

Related Questions