如何在包含图标的div中居中显示文本

Question

我遇到了以下问题，并附有图片来说明：

我有一个容器，里面装有图标和文字。图标始终在左侧，可以有更多固定在左侧的图标。现在，我希望文本位于容器的中心。如果文本太长，则不应与图标重叠，而应向右扩展。

如果文本太长而无法放入图标旁边的容器中，最后我将其省略。

但是我该怎么做呢？有CSS解决方案吗？

谢谢！

Answer 1

您可以使文本占据容器父级的整个宽度，但具有左右填充的方式将为图标留出足够的空间。

然后，您可以将图标覆盖在文本框的顶部。

文本框可以使文本居中对齐，如果溢出则可以剪切文本。

我用一支简单的笔来说明这个想法。希望有帮助

Codepen example

这是代码。

HTML

<div class="container">
  <i class="fa fa-map"></i>
  <div class="textbox"><span class='centerized-text'>This is a centered text and it is very long</span></div>
</div>

CSS

.container {
  background-color: #FAFBFD;
  width: 15rem;
  height: auto;
  padding: 0.5rem;
  border-radius: 4px;
}
i {
  color: teal;
  position: absolute;
}
.textbox {
  padding: 0 1.3rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}
body {
  padding: 2rem;
  background-color: #dedede;
}

（身体的风格只是为了您的视觉享受）

Answer 2

这里有一个代码

#container {
  display: flex;
  flex-direction: row;
  padding: 20px;
  border: 2px solid skyblue;
}

#icon {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: skyblue;
}

#text {
  flex: 1;
  text-align: center
}

<div id="container">
  <span id="icon"></span>
  <span id="text">Lorem Ipsum</span>
</div>

将文本置于块的中心

#container {
  position: relative;
  padding: 20px;
  border: 2px solid skyblue;
  text-align: center;
}

#icon {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: skyblue;
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
}

<div id="container">
  <span id="icon"></span>
  <span id="text">Lorem Ipsum</span>
</div>

Answer 3

在容器使用中，两个span tag和第一个跨度将包含您的image tab，另一个包含文本。

您可以使用align-text-center来使文本居中。