Monday 15 September 2014

html - putting a text and image side by side with aligning the text to the bottom -



html - putting a text and image side by side with aligning the text to the bottom -

im trying set text , image side side, text have aligned @ bottom nil working, im using twitter-bootstrap , 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: im trying accomplish http://postimg.org/image/ss7u8u6mh/

you'll need create few changes html , css:

move span before image in html remove float: right; span in css add display: inline-block; span in css

class="snippet-code-css lang-css prettyprint-override">img { display: inline-block; margin-bottom: 40px margin-left: 10px; } span { display: inline-block; vertical-align: bottom; } class="snippet-code-html lang-html prettyprint-override"><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>

html css twitter-bootstrap

No comments:

Post a Comment