小编Fly*_*Day的帖子

中心绝对定位伪元素

这是小提琴.我想要做的是将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%;
}
Run Code Online (Sandbox Code Playgroud)
<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. …
Run Code Online (Sandbox Code Playgroud)

css css-position css3

1
推荐指数
1
解决办法
1358
查看次数

标签 统计

css ×1

css-position ×1

css3 ×1