中心绝对定位伪元素

Question

这里是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>

Answer 1

在给定的标记，如果你知道的图像比前面，你可以这样做，你用它来计算对视口宽度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>

Answer 2

试试这个！

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

Answer 3

您将需要使用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>