IMG и текст (с многоточием) в одной и той же линии - ЦЕНТРУ

Question

Вот код примера: problem code example У меня есть код, где ниже условия должны быть выполнены: 1) IMG и текст в той же строке 2) текст с многоточием (так текст длиной не вызывают перемещение его в следующей строке) 3) и IMG и текст по центру родителя

Первое условие легко: img{float:left;}

То же самое со вторым:

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

Но третий - реальная боль для меня. Если я оставлю его, поскольку только текст будет центрирован, а img останется слева (не видно длинными именами) - третий элемент в примере. Любого изменения Старается:
двигается текст на следующую строку или уничтожить многоточие эффекта или идет от родительских границ.

Пожалуйста, помогите.

Answer 1

Вы можете легко отсортировать это с помощью гибкой модели.

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

fork of your pen

Answer 2

li{ 
    width:15%; 
    text-align:center; 
    border: 1px solid black; 
} 

#img1{ 
    /*float:left;*/vertical-align: inherit; 
} 

#longName{ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display:inline-block; max-width:175px; 
} 

#parent4{ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

demo