隣接する3つの画像の上にテキストリンクを配置する

Question

3つのテキストリンクを含むdivを作成しました。私はそれの対応するイメージの上の中心にテキストの各部分が必要です。ここで

は私のdivです：誰も私はそう上記のCSSを修正助けることができる page image

：

ここ

#catalogs ul { 
 
    text-align: justify; 
 
} 
 

 
#catalogs ul:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
#catalogs ul:before { 
 
    content: ''; 
 
    display: block; 
 
    margin-top: -0.75em; 
 
} 
 

 
#catalogs li { 
 
    display: inline-block; 
 
    margin-right: 1.75em; 
 
    position: relative; 
 
    top: 1.25em; 
 
    font-size: 100%; 
 
}

<div id="catalogs"> 
 
    <ul> 
 
    <li><span style="text-decoration: underline; color: #0b5394;"><a 
 
    href="http://www.kerussosales.com/kerusso-spring-2017" target="_blank" 
 
    rel="noopener noreferrer">Spring 2017</a></span></li> 
 
    <li><span style="text-decoration: underline; color: #0b5394;"><a 
 
    href="http://www.kerussosales.com/kerusso-summer-2017-catalog" 
 
    target="_blank" rel="noopener noreferrer">Summer 2017</a></span></li> 
 
    <li><strong>Fall 2017 - available August 1st</strong></li> 
 
    </ul> 
 
</div>

ページは現在、上記のコードを使用して次のようになります各テキストリンクは、それぞれの画像の上に完全に中央揃えされていますか？

Answer 1

私はそれぞれの画像とテキストを別のDIVボックスにラップして、text-align：centerを使ってテキストを中央に配置します。それはうまくいくはずです！

私はそれらのためのリスト項目を使用する場合は私は夢中です。たぶんh3や段落タグのような見出しタグ。私はかもしれない、私が何を意味するかを確認するには、以下の私のペンをチェックアウト= D（私は私も私のcodepen例を好む。願って明確化を追加するために、ここに私の例にインラインスタイルを追加して、それはきれいだ）

https://codepen.io/celtninja/pen/RgBzOZ

<div id="one" style="float: left; margin: 5px;"> 
    <p style="text-align: center;">Image Heading</p> 
    <img style="text-align: center;" 
    src="https://placeholdit.co//i/350x350?"> 
</div>