html - img and text (with ellipsis) in the same line - CENTERED -

here code of example: problem code example have code below conditions must fulfilled: 1) img , text in same line 2) text ellipsis (so text length not cause moving next line) 3) both img , text centered in parent

first condition easy: img{float:left;}

same second one:

longname{  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:block;} 

but third 1 real pain me. if leave text center, while img stays on left (not visible long names) - third element in example. change try:
moves text next line or destroy ellipsis effect or goes off parent borders.

please help.

you sort out flex model.

.img-circle {   display:flex;   justify-content:center;  } 

fork of pen