I would like to move the icon closer to the text making them both centered in the container, but the text took up all the remaining space of the container.

Here's the code:

.container {
  width: 150px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background-color: #F3F3F3;
}

span {
  text-align: center;
}

i {
  margin-left: 4px;
}

<div class="container">
  <span>Lorem ipsum dolorsit amet, consectetur adipiscing</span>
  <i class="material-icons">face</i>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Here's a fiddle to playaround:

Here's the expected output:

CodePudding user response：

Credits to SHAHIL MASHIRA, for the idea of giving the span a width.

Here's the resolution code:

.container {
  width: 150px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background-color: #F3F3F3;
  margin-bottom: 8px;
}

span {
  text-align: center;
  max-width: 95px;
}

i {
  margin-left: 4px;
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I used max-width so that the short texts aren't affected.

Here's the updated jsfiddle:

CodePudding user response：

Use position relative.

Add these to your css code. demo

i {
  margin-left: 4px;
  position: relative;
  left: -10px;
}

CodePudding user response：

    .container {
      width: 150px;
      height: 108px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      background-color: #F3F3F3;
    }

    span {
      text-align: center;
    }

    i {
      position:relative;
      right:10px;
    }

<div class="container">
  <span>Lorem ipsum dolorsit amet, consectetur adipiscing</span>
  <i class="material-icons">face</i>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

position

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

CodePudding user response：

Adjust setting for yourself that i given i hope it will work

i {
  position: relative;
  left: 20%;
  */Turn into px if percentage dont work*/ top: 30%;
  z-index: -1;
}

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>