インラインブロックのdivの垂直中心のコンテンツ

Question

私はdivのコンテンツを水平方向と垂直方向に集中させようとしています。私はそれを説明するいくつかのスレッドを見つけましたが、それは私のコードにうまく収まらない。

他のdiv（.container）に3つの中央揃えのdiv（.block）がありますが、中央に表示されますが、画面上に表示されます。ブロックのコンテンツは垂直方向に中央揃えされていません。私は行の高さを使用しようとしましたが、いくつかのテキストが（ブロックから）緩んでいます。ここで

が私のコードです：

.container { 
    width: 70%; 
    margin: 10px auto; 
    position: relative; 
    text-align: center; 
    border: 1px solid black; 
} 

.block { 
    background-image: -webkit-linear-gradient(150deg, #D7D7D7, #979797); 
    background-image: -o-linear-gradient(150deg, #D7D7D7, #979797); 
    background-image: linear-gradient(240deg, #D7D7D7, #979797); 
    border-radius: 10px; 
    height: 100px; 
    width: 100px; 
    display:inline-block; 
    margin: 10px; 
    padding: 10px; 
    vertical-align: middle; 
    line-height: 1.5; 
} 

<div class="container"> 
     <div class="block">Hello</div> 
     <div class="block">Everybody</div> 
     <div class="block">Would like to center it please</div> 
</div> 

私はpタグ内のコンテンツを入れてみました、それは良いでしょうが、それでも中心としません。

ありがとうございました。

Answer 1

これは、以下に示す設定を使用して、コンテナとその中のアイテムの両方でフレックスで行うことができます。この場合、各コンテナのテキストコンテンツは自動的にフレックスアイテムとして扱われ、センタリングが可能になります。

.container { 
 
    width: 70%; 
 
    margin: 10px auto; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.block { 
 
    background-image: -webkit-linear-gradient(150deg, #D7D7D7, #979797); 
 
    background-image: -o-linear-gradient(150deg, #D7D7D7, #979797); 
 
    background-image: linear-gradient(240deg, #D7D7D7, #979797); 
 
    border-radius: 10px; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    vertical-align: middle; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <div class="block">Hello</div> 
 
    <div class="block">Everybody</div> 
 
    <div class="block">Would like to center it please</div> 
 
</div>