イメージの下にテキストを配置するにはどうすればよいですか？

Question

私は3つの画像と整列したい3つのh1タグを持っています。これどうやってするの？私はテキストを画像の下に整列させたいが、私が今使っているコードはかなり離れている。

.column { 
 
    max-width: 960px; 
 
    padding: 0 100px; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.column>h1 { 
 
    display: flex; 
 
    font-family: 'Montserrat-Bold'; 
 
    font-size: 30px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Design</h1> 
 
    </div> 
 

 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Code</h1> 
 
    </div> 
 

 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rFbByg7Y.png" alt="design"> 
 
    <h1>Collaborate</h1> 
 
    </div> 
 
</div>

Answer 1

.column { 
 
    display: flex;    /* new (1) */ 
 
    flex-direction: column; /* new (2) */ 
 
    align-items: center;  /* new (3) */ 
 
    max-width: 960px; 
 
    padding: 0 100px; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.column > h1 { 
 
    /* display: flex; <--- remove; not necessary */ 
 
    font-family: 'Montserrat-Bold'; 
 
    font-size: 30px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Design</h1> 
 
    </div> 
 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Code</h1> 
 
    </div> 
 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rFbByg7Y.png" alt="design"> 
 
    <h1>Collaborate</h1> 
 
    </div> 
 
</div>

注：

1. imgとh1要素フレックスコンテナのメイク親。
2. 縦にフレックスアイテムをスタックします。
3. フレックスアイテムを水平に中央に配置します。

Answer 2

見出しにdisplay: flexは必要ありません。それは部分的に責任がある。

代わりにあなたが考慮したいと思う：

.heading { 
 
text-align: center; 
 
} 
 

 
.heading span { 
 
    display: block; 
 
    margin-top: 6px; 
 
}

<h1 class="heading"> 
 
    <img src="http://placehold.it/350x150" alt="" /> 
 
    <span>Title Text</span> 
 
</h1>

見出し内の画像を配置することにより、表示されるテキストは、画像のラベルとして機能するので、あなたがする必要はありませんそれは純粋に装飾のために追加altテキストを追加します。

Answer 3

.column img{width:80%; margin-left:auto; margin-right:auto;} 
.column h1{text-align:center;} 

まず、それはその後、左余白と右の自動車とそれがテキスト整列を与えることによって、あなたのdiv要素内の中心になり、列幅のパーセントである幅であるIMGを与える：あなたはのテキストを中心ますセンターあなたのイメージの下にあなたのhedearコラムここで私たちのアイデア以上のコードです。

Answer 4

ディスプレイを取り出し：

.column { 
 
    max-width: 960px; 
 
    padding: 0 100px; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.column>h1 { 
 
    font-family: 'Montserrat-Bold'; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    border: solid red; 
 
    margin-top: 0; 
 
} 
 

 
img { 
 
    border: solid blue; 
 
} 
 

 
.column>h1 { 
 
    margin-bottom: 0; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Design</h1> 
 
    </div> 
 

 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rG6nw7kN.png" alt="design"> 
 
    <h1>Code</h1> 
 
    </div> 
 

 
    <div class="column"> 
 
    <img src="https://cdn.pbrd.co/images/7rFbByg7Y.png" alt="design"> 
 
    <h1>Collaborate</h1> 
 
    </div> 
 
</div>