img 和文本（带省略号）在同一行 - 居中

Question

示例代码如下： problem code example 我有一个必须满足以下条件的代码： 1）img和text在同一行 2）带省略号的文本（因此文本长度不会导致将其移动到下一行） 3) img 和 text 都在 parent

中居中

第一个条件很简单：img{float:left;}

同第二个：

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

但是第三个对我来说真的很痛苦。如果我离开它，因为它只有文本会居中，而 img 留在左边（长名称不可见） - 例如第三个元素。我尝试的任何更改：
将文本移动到下一行要么破坏省略号效果要么离开父边界。

请帮忙。

Answer 1

您可以使用 flex 模型轻松解决这个问题。

.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

img 和文本（带省略号）在同一行 - 居中

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

html

css

center

ellipsis