中心絕對定位僞元素

這裏是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>

來源

2017-04-21 FlyFishingAllDay

你將不得不如果你試圖做一個大問題這是迴應。是固定大小的圖像嗎？問題在於，由於您將按鈕附加到'div'容器，並且大小會有所不同，因此常規技術將失敗。如果圖像的高度是固定的，那麼就有一個解決方案。 – Manngo

@Manngo同意，只能通過使用JavaScript動態圖像高度和沒有標記更改。 – Stickers

在給定的標記，如果你知道的圖像比前面，你可以這樣做，你用它來計算對視口寬度vw，並結合transform: translate。

在這種情況下，圖像比例的因素是三百五十零分之一百五十零〜0.428

Fiddle demo

.test { 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 

 
.test:before { 
 
    content: "\f144"; 
 
    font-family: FontAwesome; 
 
    font-size: 80px; 
 
    left: 50%; 
 
    position:absolute; 
 
    top: calc(50vw * 0.428);    /* width * image ratio factor */ 
 
    transform: translate(-50%,-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>

來源

2017-04-22 06:59:07 LGSon

這一個爲我所要求的工作，謝謝。 – FlyFishingAllDay

@FlyFishingAllDay任何一個飛釣魚兄弟:) – LGSon

試試這個！

<div class="test"> 
<div class="image"> 
<img src="http://placehold.it/350x150"> 
<div class="play"></div> 
</div> 

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

CSS：

.test { 
    height: 500px; 
    width: 100%; 
} 
.image{ 
    position:relative; 
} 
.play::after { 
    content: "\f144"; 
    font-family: FontAwesome; 
    font-size: 80px; 
    left: 50%; 
    position:absolute; 
    top:50%; 
    transform:translate(-50%,-50%); 
} 

img{ 
    width: 100%; 
}

來源

2017-04-21 22:50:05

我忘了提及我無法訪問我正在處理的頁面上的標記，必須是純粹的CSS。我基本上只是重新創建了這個問題...... – FlyFishingAllDay

所以，如果你知道圖像的高度，你只需要把top：XXpx放在圖像上的播放按鈕的中心。 –

也必須作出迴應......我的壞因爲沒有提到。儘管我會嘗試桌面主視圖。 – FlyFishingAllDay

您將需要使用JavaScript來，這裏是通過jQuery的例子：

插入，並且將它們設置爲相同的高度橫幅圖像。
將fa play圖標添加到該包裝中。
把它們放入jQuery resize()函數使其響應。
使用CSS flexbox或任何其他方法將圖標居中在包裝中。

jsFiddle

$(document).ready(function() { 
 
    $(window).trigger('resize'); 
 
}); 
 

 
$(window).on('resize', function() { 
 
    if (!$('.wrap').length) { 
 
    $('<div class="wrap"><i class="fa fa-play-circle" aria-hidden="true"></i></div>').prependTo('.test'); 
 
    } 
 
    $('.wrap').css('height', $('.test img').height()); 
 
});

.test { 
 
    position: relative; 
 
} 
 

 
.wrap { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    font-size: 80px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
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"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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

來源

2017-04-22 02:20:32 Stickers

中心絕對定位僞元素

回答

相關問題