Search code examples
htmlcsscenterellipsis

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

Here is a code of example: problem code example I have a code where below conditions must be fulfilled: 1) img and text in the same line 2) text with ellipsis (so text length do not cause moving it to next line) 3) both img and text centered in parent

First condition is easy: img{float:left;}

Same with the second one:

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

But third one is a real pain for me. If I leave it as it is only text will center, while img stays on left (not visible with long names) - third element in example. Any change I try:
moves text to next line or destroy ellipsis effect or goes off parent borders.

Please help.

Solution

  • You could easily sort this out with the flex model.

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

    fork of your pen