浮動小数点の中心にあるアイテムを保持する問題

Question

私はプロジェクトに取り組んでいます。さまざまな方法で、使用しているプラ​​ットフォームの画像の横に注意深くテキストを置くことができました。画像とテキストの両方が中央揃えされていますが、テキストは左詰めです。

ページは応答性が高く、一般的にうまくいくはずですが、ブラウザのサイズが縮小するにつれて、最終的にテキストは次の行にプッシュされます。残念なことに、これが起こると、もはや中心合わせされなくなり、画像は中心からずれる。

私は、現在のテーマ/ユースケース内で何が修正できるかを正確に把握しようとしばらく頑張ってきました。 https://jsfiddle.net/xLwy83rj/

<div style="width: 50%; margin: 0 auto; min-width: 250px;"> 
<!--I edit the margins in the next block to better prevent the text from flowing over the bottom of the image if its a smaller or larger block of text --> 
<img style="float: left; margin-right: 1rem; margin-top: 15px; margin-bottom: 15px;" src="http://via.placeholder.com/128x128" /> 
</div> 

<div style="display: inline-block; width: 200px;"> 
<p style="text-align: left;"><strong>Attack Gloves</strong><br /> 
Base DPS: ~<strong>572.5</strong><br /> 
Attack Range: <strong>1100</strong><br /> 
Heat Buildup: <strong>95</strong><br /> 
Heat Buildup: <strong>95</strong><br /> 
Heat Buildup: <strong>95</strong><br /> 
Heat Buildup: <strong>95</strong></p> 

は、具体的な目標は、それらの間のスペースを少しだけで、すべての時間を中心に2つの主要な要素を維持することです。ブラウザが小さすぎて横並びに表示できない場合は、テキストを下に押し下げて、すべてを中央に維持します。

Answer 1

demo used flex

.main { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
.p{ 
 
    margin: 0; 
 
}

<div class="main"> 
 
<div class="top"> 
 
<img class="alignnone second" src="http://via.placeholder.com/128x128" /> 
 
</div> 
 

 
<div class="third"> 
 
    <p class="p"><strong>Attack Gloves</strong><br /> 
 
    Base DPS: ~<strong>572.5</strong><br /> 
 
    Attack Range: <strong>1100</strong><br /> 
 
    Heat Buildup: <strong>95</strong><br /> 
 
    Heat Buildup: <strong>95</strong><br /> 
 
    Heat Buildup: <strong>95</strong><br /> 
 
    Heat Buildup: <strong>95</strong></p> 
 
</div> 
 
</div>

Answer 2

このHTMLを試してみてください

HTML

<div style="text-align:center;width:50%;margin:auto;"> 
<!--I edit the margins in the next block to better prevent the text from flowing over the bottom of the image if its a smaller or larger block of text --> 
<img class="alignnone" src="http://via.placeholder.com/128x128" style="display:inline-block;" /> 
<p style="display:inline-block;"><strong>Attack Gloves</strong><br /> 
Base DPS: ~<strong>572.5</strong><br /> 
Attack Range: <strong>1100</strong><br /> 
Heat Buildup: <strong>95</strong><br /> 
Heat Buildup: <strong>95</strong><br /> 
Heat Buildup: <strong>95</strong><br /> 
Heat Buildup: <strong>95</strong></p> 
</div> 

Link for reference

あなたはすべての時間を中心とし続けるしたい項目https://jsfiddle.net/

Answer 3

<div style="width: 50%; margin: 0 auto; min-width: 250px; text-align:center; float:left;"> 
 
<!--I edit the margins in the next block to better prevent the text from flowing over the bottom of the image if its a smaller or larger block of text --> 
 
<img class="alignnone" style="display:inline-blcok; margin-right: 1rem; margin-top: 15px; margin-bottom: 15px;" src="http://via.placeholder.com/128x128" /> 
 

 
</div> 
 
<div style="display: inline-block; width: 200px; float:left;"> 
 
<p style="text-align: left;"><strong>Attack Gloves</strong><br /> 
 
Base DPS: ~<strong>572.5</strong><br /> 
 
Attack Range: <strong>1100</strong><br /> 
 
Heat Buildup: <strong>95</strong><br /> 
 
Heat Buildup: <strong>95</strong><br /> 
 
Heat Buildup: <strong>95</strong><br /> 
 
Heat Buildup: <strong>95</strong></p> 
 

 
</div>