Question

我这里有css问题。我正在尝试将播放按钮放在图像的中间，并在其下方放置几行文本。我正在追逐的是类似于音频播放器，其中图像是封面图片，按钮是播放图标和3行文本。我甚至不知道从哪里开始。我的HTML是......

.track {
  width: 400px;
  height: 400px
}

.track-info {
  display: inline-block;
  float: left;
  width: 160px;
  height: auto;
}

img {
  width: 400px;
  height: 400px;
  position: absolute
}

<div class="track">
  <img src="image.jpg">
  <div>
    <button>playbutton</button>
  </div>
  <div class="track-info">
    <h3>Artist Name</h3>
    <h4>Track title</h4>
    <h5>Any text</h5>
  </div>
</div>

我玩了一个左，右和上边距的圆形但看起来定位和显示是解决它的唯一方法

Answer 1

假设您希望按钮位于图片的中间，并使用下面的文字，您需要按钮position: absolute以及top和left偏移量，它是基于图像大小的计算。为了清楚起见，我在此示例中为<div>提供了按钮.play：

.track img {
  width: 400px;
  height: 400px;
}

.track .play {
  position: absolute;
  top: calc((400px / 2) - (22px / 2)); /* Half image height minus half button height */
  left: calc((400px / 2) - (78px / 2)); /* Half image width minus half button width */
}

<div class="track">
  <img src="http://placehold.it/100">
  <div class="play">
    <button>playbutton</button>
  </div>
  <div class="track-info">
    <h3>Artist Name</h3>
    <h4>Track title</h4>
    <h5>Any text</h5>
  </div>
</div>

希望这有帮助！：）

Answer 2

您的问题在于定位，您应该尝试：

.image-div {
position: relative;
}
.button {
position: absolute;
top :150px;
left:190px;
}

<div class="img-div">
  <img src="https://i.ytimg.com/vi/5dsGWM5XGdg/hqdefault.jpg"/>
<button class="button">Click me</button>
</div>

Answer 3

将按钮放在绝对位于中心的文本中，然后将轨道信息绝对定位在居中元素下方。这会将按钮置于中间，文本位于下方。

您也可以将图片设为.track的背景图片，尽管我没有这样做。注释掉用于执行该操作的CSS，然后从html和css中的img块中删除img。

＆＃13;

.track {
  /* background: url('https://i.stack.imgur.com/2C22p.jpg') 0 0 no-repeat / cover; */
  width: 400px;
  height: 400px;
  position: relative;
  background: url('') 0 0 no-repeat / cover;
}

.centered {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

.track-info {
  position: absolute;
  top: 100%;
  width:160px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

img {
  width: 400px;
  height: 400px;
  position: absolute;
}

＆＃13;

<div class="track">
  
  <img src="https://i.stack.imgur.com/2C22p.jpg">

  <div class="centered">
    <button>playbutton</button>
    <div class="track-info">
      <h3>Artist Name</h3>
      <h4>Track title</h4>
      <h5>Any text</h5>
    </div>
  </div>

</div>

＆＃13;

Answer 4

对齐水平使用margin:0 auto

对齐垂直使用公式：((parent's width /2) + (width / 2))

＆＃13;

img {
  width: 400px;
  height: 400px;
} 

 .track {
  position: relative;
  width: 400px;
  height: 400px;

 }

.center {
  position: relative;
  width: 200px;
  height: 200px;
  display: block;
  text-align: center;
  margin: 0 auto;/*align Horizontal */
  top: -300px;/*align Vertical:((parent's width /2) + (width / 2))*/
}

.track-info {
  background-color: rgba(0,0,0,0.3);
  color: #FFF;
}

＆＃13;

 <div class="track">
  <img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg">
  <div class="center">
    <div>
      <button>playbutton</button>
    </div> 
    <div class="track-info">
      <h3>Artist Name</h3>
      <h4>Track title</h4>
      <h5>Any text</h5> 
    </div> 
  </div>
</div>

＆＃13;

将按钮放在图像和文本中间

4 个答案: