背景内のテキストによって制御される背景の幅。高さは固定されています

Question

私はその中のポストにコメントの数を持っているバブルの背景imgでdivを作ろうとしています。私はテキストの内側にテキストの幅を制御したいのですが、divの高さは静的なままにしておきます。

私は今ここにあるコードです。内部の値が3桁の数字の場合は大丈夫ですが、2桁の数字かそれ以外の3桁の数字に変更すると、バブルは垂直方向と水平方向に移動し、テキストはもう中央揃えされません。

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

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

Answer 1

私はあなたの#comment_countにいくつかのコードを追加しました。 background-position:centerを添加

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

Answer 2

試してください - これは要素の変化幅として水平に背景画像をセンタリング。私はそれがあなたが達成しようとしているものだと思います。

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

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