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:
movespan
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