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

【问题标题】：img and text (with ellipsis) in the same line - CENTEREDimg 和文本（带省略号）在同一行 - 居中
【发布时间】：2015-07-08 08:53:07
【问题描述】：

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

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

与第二个相同：

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

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

请帮忙。

【问题讨论】：

标签： html css center ellipsis

【解决方案1】：

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

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

fork of your pen

【讨论】：

中间的图像现在比原来的 20 X 20 小，现在是 16.1563 X 20。你能告诉我如何避免它吗？

【解决方案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

【讨论】：

谢谢，但它会将中间的文本（长文本）移动到下一行。 Gcyrillus 已经给出了很好的答案。