インラインイメージの下にテキストを追加

私は、一連のアイコン（リンク）を水平線に置く次のコードを持っていますが、各イメージの下にテキストを追加する方法は不思議でしたか？私は<br>text</br>を使ってみましたが、その右側のすべてのイメージが改行に置かれ、私はただ水平リストを取得します。誰もここに助けを提供することはできますか？私は過去インラインイメージの下にテキストを追加

HTMLで繰り返しこの問題を抱えています

<head> 
    <title>Server Name</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <div id="logo"> 
    <img src="assets/img/logo.gif" class="logo-img" /> 
    </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    <div id="links-container"> 
    <div class="links" align="center"> 
     <a href="./forums"><img src="assets/img/Forums.png"></a>&nbsp;&nbsp; 
     <a href="http://shop.zentriamc.com"><img src="assets/img/Store.png"></a>&nbsp;&nbsp;&nbsp; 
     <a href="./vote"><img src="assets/img/Vote.png"></a>&nbsp;&nbsp;&nbsp; 
     <a href="./bans"><img src="assets/img/Bans.png"></a>&nbsp;&nbsp;&nbsp; 

    </div> 
    </div> 
</body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS：位置relativeと位置absuloteとpの使用とdivで

body { 
    background: url(assets/img/bk.gif) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#logo { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 150px; 
} 
.logo-img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 

} 
#links-container { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    margin: auto; 
} 
.links img { 
    transition: all .2s ease-in-out; 
    display: inline; 
} 
.links img:hover { 
    transform: scale(1.1); 
} 
.links p { 
    font-family: "PT-Sans", sans-serif; 
    color: white; 
}

出典

2017-08-23 J. Doe

https://stackoverflow.com/questions/41321369/how-to-add-a-caption-like-text-under-image-in-css – Ofisora

1）ラップa要素と設定しますbottomとleftです。

2）brの連続シーケンスを使用する代わりに、topプロパティとtramsformプロパティの使用。

body { 
 
    background: url(assets/img/bk.gif) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
#logo { 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 150px; 
 
} 
 
.logo-img { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#links-container { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    margin: auto; 
 
} 
 
.links img { 
 
    transition: all .2s ease-in-out; 
 
    display: inline; 
 
    width: 100%; 
 
} 
 
.links img:hover { 
 
    transform: scale(1.1); 
 
} 
 
.links p { 
 
    font-family: "PT-Sans", sans-serif; 
 
    color: white; 
 
} 
 
.cont { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin-right: 10px; 
 
    width:20%; 
 
} 
 

 
.cont p { 
 
    position: absolute; 
 
    bottom: -30px; 
 
    left: 0; 
 
    margin: 0; 
 
    background-color: rgba(0,0,0,0.7); 
 
    width: 100%; 
 

 
} 
 

 
#links-container { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div id="logo"> 
 
    <img src="assets/img/logo.gif" class="logo-img" /> 
 
</div> 
 
    <div id="links-container"> 
 
    <div class="links" align="center"> 
 
     <div class="cont"> 
 
     <a href="./forums"><img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></a> 
 
     <p>Some text</p> 
 
     </div> 
 
     <div class="cont"> 
 
     <a href="./forums"><img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></a> 
 
     <p>Some text</p> 
 
     </div> 
 
     <div class="cont"> 
 
     <a href="./forums"><img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></a> 
 
     <p>Some text</p> 
 
     </div> 
 
     <div class="cont"> 
 
     <a href="./forums"><img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg"></a> 
 
     <p>Some text</p> 
 
     </div> 
 
    </div> 
 
    </div>

出典

2017-08-23 03:16:20 Ehsan

インラインイメージの下にテキストを追加

答えて

関連する問題