這裏是fiddle。我想要做的是將FontAwesome播放按鈕絕對放置在圖像頂部和中間位置。想知道如果有人曾經嘗試過或有過任何見解,試圖以我能想到的方式去做。中心絕對定位僞元素
請注意,我無法訪問我正在處理的頁面上的標記,必須是純CSS。
.test {
height: 500px;
width: 100%;
}
.test:before {
content: "\f144";
font-family: FontAwesome;
font-size: 80px;
left: 50%;
position: absolute;
top: 50%;
}
img {
width: 100%;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
<img src="http://placehold.it/350x150">
<h2>Lorem ipsum dolor sit amet</h2>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dicta quae a illo nulla, temporibus in nostrum id quia totam sint veritatis aspernatur vitae, similique labore non voluptate, dolores magnam.
</div>
<br>
<a class="btn btn-default">Learn More >></a>
</div>
你將不得不如果你試圖做一個大問題這是迴應。是固定大小的圖像嗎?問題在於,由於您將按鈕附加到'div'容器,並且大小會有所不同,因此常規技術將失敗。如果圖像的高度是固定的,那麼就有一個解決方案。 – Manngo
@Manngo同意,只能通過使用JavaScript動態圖像高度和沒有標記更改。 – Stickers