html - Vertical align inline text/image -
i have title , subtitle in header:
<header> <h1>article title</h1> <p>by john smith<span class="right">100 likes<img src="http://placehold.it/44x44"/></span></p> </header> the subtitle needs have name on left , number of likes on right - image.
i want text in vertical center of image i've used:
img{ vertical-align: middle; } this works count, not name. how can name appear in same vertical alignment?
if it's ok add <span> around name, read on.
span { display: table-cell; vertical-align: middle; white-space: nowrap; } img { vertical-align: middle; } .right { width: 100%; text-align: right; } <header> <h1>article title</h1> <p><span>by john smith</span><span class="right">204 likes<img src="http://placehold.it/44x44"/></span></p> </header> fiddle demo: http://jsfiddle.net/l4n50f49/
Comments
Post a Comment