背景img宽度由文本里面控制。高度保持静止

Question

我试图用一个泡泡的背景img创建一个div，它对帖子中的帖子有一些评论数。我希望宽度由文本内部控制，而div的高度应该保持静态，所以我可以保持文本在verticaly中心。

我现在拥有的是此处的代码。当里面的值是一个3位数字时看起来没问题，但是如果我将它改为2位数字或其他任何东西，然后是3位数字，则气泡会垂直移动并且水平移动，因此文本不再居中。

＆＃13;

＆＃13;

#wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  min-width: 100%;
  align-items: baseline;
}
#comment_text {
  display: flex;
  font-weight: bold;
}
#comment_img {
  display: flex;
  background: url('https://rajohan.no/img/icons/picons_basic_1/SVG/basic1-021_chat_comment_bubble.svg'); 
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 21px;
  margin-left: 10px;
}
#comment_count {
  display: flex;
  font-weight: bold;
}

＆＃13;

<div id="wrapper">
  <div id="comment_text">
    COMMENTS
  </div>
  <div id="comment_img">
    <div id="comment_count">
      160
    </div>
  </div>
</div>           

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试添加background-position:center - 这会在元素更改宽度时水平居中背景图像。我认为这是你想要实现的目标。

＆＃13;

＆＃13;

#wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  min-width: 100%;
  align-items: baseline;
}

#comment_text {
  display: flex;
  font-weight: bold;
}

.comment_img {
  display: flex;
  background: url('https://rajohan.no/img/icons/picons_basic_1/SVG/basic1-021_chat_comment_bubble.svg');
  background-repeat: no-repeat;
  background-position: center;
  padding: 21px;
  margin-left: 10px;
}

.comment_count {
  display: flex;
  font-weight: bold;
}

＆＃13;

<div id="wrapper">
  <div id="comment_text">
    COMMENTS
  </div>
  <div class="comment_img">
    <div class="comment_count">
      16
    </div>
  </div>
  <div class="comment_img">
    <div class="comment_count">
      160
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我在#comment_count添加了一些代码。

#wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  min-width: 100%;
  align-items: baseline;
}
#comment_text {
  display: flex;
  font-weight: bold;
}
#comment_img {
  display: flex;
  background: url('https://rajohan.no/img/icons/picons_basic_1/SVG/basic1-021_chat_comment_bubble.svg'); 
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 21px;
  margin-left: 10px;
}
#comment_count {
  display: flex;
  font-weight: bold;
  min-height: 20px;
  min-width: 25px;
 justify-content: center;
}

<div id="wrapper">
  <div id="comment_text">
    COMMENTS
  </div>
  <div id="comment_img">
    <div id="comment_count">
      160
    </div>
  </div>
</div>           

<div id="wrapper">
  <div id="comment_text">
    COMMENTS
  </div>
  <div id="comment_img">
    <div id="comment_count">
      22
    </div>
  </div>
</div>