divの中心になるので、その内容は常にmiddelになります

Question

divの内部が常にページの中央にくるようにdiv {class = "informationbox"}の中心に配置しようとしています。 。

.informationbox{ 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    display:block; 
 
    position: absolute; 
 
}

<div class="informationbox"> 
 
     <div style="display: inline-block;"> 
 
      <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" /> 
 
      <p>Something</p> 
 
      <p>Wall of Text</p> 
 
     </div> 
 
     <div style="display: inline-block;"> 
 
      <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" /> 
 
      <p>Something</p> 
 
      <p>Wall of Text</p> 
 
     </div> 
 
     <div style="display: inline-block;"> 
 
      <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" /> 
 
      <p>Something</p> 
 
      <p>Wall of Text</p> 
 
     </div> 
 
</div>

Answer 1

.informationbox{ 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    display:block; 
 
    position: absolute; 
 
    display: flex; 
 
    justify-content: space-around; /*or "center"*/ 
 
}

<div class="informationbox"> 
 
     <div style="display: inline-block;"> 
 
      <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" /> 
 
      <p>Something</p> 
 
      <p>Wall of Text</p> 
 
     </div> 
 
     <div style="display: inline-block;"> 
 
      <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" /> 
 
      <p>Something</p> 
 
      <p>Wall of Text</p> 
 
     </div> 
 
     <div style="display: inline-block;"> 
 
      <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" /> 
 
      <p>Something</p> 
 
      <p>Wall of Text</p> 
 
     </div> 
 
</div>

Answer 2

だけinformationboxにテキストアラインセンターを追加し、他のすべてのCSSを削除します。これは、あなたのコンテンツがインラインである（すべてのdivがdisplay: inline-block）ためにのみ有効です。

.informationbox{ 
 
    text-align: center; 
 
}

<div class="informationbox"> 
 
     <div style="display: inline-block;"> 
 
      <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" /> 
 
      <p>Something</p> 
 
      <p>Wall of Text</p> 
 
     </div> 
 
     <div style="display: inline-block;"> 
 
      <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" /> 
 
      <p>Something</p> 
 
      <p>Wall of Text</p> 
 
     </div> 
 
     <div style="display: inline-block;"> 
 
      <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" /> 
 
      <p>Something</p> 
 
      <p>Wall of Text</p> 
 
     </div> 
 
</div>

WARNING：あなたはこのソリューションを使用するときは、インラインブロック要素間の不要なスペースで終わるかもしれません。これは、それらの間に「スペース」（文字）があるためです。これは、直前のdivを閉じた後すぐに次のdivを開くことで解決できます。