将一个按钮放在图像和文字的中间

我在这里遇到了css问题。我正在尝试将我的播放按钮放置在图像的中间以及其下方的几行文本行中。我追逐的内容类似于音频播放器，其中图像是封面图片，按钮是播放图标和文本的三行。我甚至不知道从哪里开始。我的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>

我已经打了左，右和顶部利润率轮，但它看起来像定位和显示是解决这个问题对我来说

来源

2017-06-20 Michelle Dimwaite

应文在中间的按钮下，或只是在中间的按钮，文本是在图像下？ –

再次Micheal焦炭。是的，文本行应该出现在按钮下方。按钮和文本都应该在图像上（即图像就像一个主包装，所有其他内容都集中在其中） –

再次问候:)提交了一个答案 - 是你要去做什么？不确定是否需要中间的按钮和下方的文本，或者如果您想要中心的按钮和文本（所以按钮将位于中心以上，文本会稍微偏离中心） –

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

您也可以使图像成为.track的背景图像，虽然我没有这样做。注释掉你用来做这件事的CSS，然后你会从你的HTML和img块中删除你的css中的img。

.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; 
 
}

<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>

来源

2017-06-20 01:47:00

@迈克尔科克：完美的解决方案迈克。 Cheerssss .. –

@MichelleDimwaite真棒，欢呼:) –

@MichelleDimwaite我很好奇你为什么选择零的解决方案。看起来过于复杂和具体。我不鼓励你改变你的答案或任何东西，只是好奇为什么这会更好，所以我知道会继续回答人们的问题。 –

的唯一途径

您的问题是定位，你应该尝试：

.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>

来源

2017-06-20 01:39:16

假设你想要的按钮是在图像的中间，与下面的文字，你会希望按钮有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>

希望这有助于！ :)

来源

2017-06-20 01:47:44

对于水平对齐使用margin:0 auto

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

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; 
 
}

<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>

来源

2017-06-20 02:31:48 Ehsan

将一个按钮放在图像和文字的中间

回答

相关问题