<a>のテキストを移動

Question

緑の部分の中央にテキストをプッシュしたいと思いますが、わかりません。私はしばらくそれを使いこなしてきましたが、私はまだ初心者です。どんな助けもありがとう。私は以下のHTMLとCSSを追加しました。

.beerimgcontainer { 
 
     width: 300px; 
 
     height: 400px; 
 
     margin-bottom: 20px; 
 
     margin-right: 20px; 
 
     display: inline-block; 
 
     position: relative; 
 
     text-align: center; 
 
     margin-right: 10px; 
 
     overflow: hidden; 
 
     max-height: 400px; 
 
    } 
 
    
 
    .beerimgcontainer a { 
 
     text-decoration: none; 
 
    } 
 
    
 
    .beerimgcontainer span { 
 
     text-decoration: none; 
 
     font-size: 23px; 
 
     font-family: champagne; 
 
     color: black; 
 
    } 
 
    
 
    .beerimgcontainer:hover { 
 
     background: #165a11; 
 
     color: white; 
 
     box-shadow: 0px 0px 0px 2px #3c8837; 
 
     box-sizing: border-box; 
 
    } 
 
    
 
    .beerimgcontainer:hover span { 
 
     color: white; 
 
    }

<div class="beerimgcontainer"> 
 
     <a href="mug.html"> 
 
     <img src="images/text2.png" class="positionimg" alt="Mug"> 
 
     <span>Mug</span> 
 
     </a> 
 
    </div>

Answer 1

imgとspanインライン要素です。彼らは最初はお互いに隣り合っています。あなたの画像は幅全体（それは利用可能です;親divの300ピクセル）をカバーするので、spanを押し下げます。スパンのマージンは機能しません。

.beerimgcontainer span { 
    display: block; 
    margin-top: 15px; 
} 

JSFiddle

：あなたは何をすべき

はspanにdisplay: blockを設定し、マージンを設定することです