html - 在 <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 上为 300px)，它会将 span 向下推。跨度上的边距不起作用。

你应该做的是在 span 上设置 display: block 然后设置边距:

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

JSFiddle