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

Question

I got the following question, with a pic to illustrate:

I got a container, containing an icon and text. The Icon is always on the left, there can be more icons which are all fixed on the left. Now I want the text to be in the centre of the container. If the text gets too long, it should NOT overlap the icons, but it should expand to the right instead.

If the text is too long to fit in the container next to the icon, finally I just ellipse it.

But how do I do this? Is there a css solution?

Thanks in advance!

Answer 1

You can have the text taking the entire width of the container parent, but having left and right padding in a way that it will have enough space for the icon.

Then you can have the icon overlaying on top of the textbox.

The text box can align text in the center and clip text if overflow.

I made a simple pen to illustrate the idea. I hope this help

Codepen example

Here's the code.

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;
}

(The style for body is just for your visual pleasure)

Answer 2

Here a code

 #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>

To have text centered in the block

 #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

In a container use, two span tag and First span will contain your image tab and another has text in it.

You can use align-text-center to center your text.