html - Vertical align inline text/image -


fiddle

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

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -