將一個按鈕放在圖像和文字的中間

我在這裏遇到了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

將一個按鈕放在圖像和文字的中間

回答

相關問題