在带有css的img上居中箭头
在带有css的img上居中箭头
提问于 2016-04-01 21:40:50
我想在图像上显示一个箭头。此箭头每次都应居中。我该怎么做呢？
下面是我用jsfiddle编写的代码
CSS：
.t1_img {
background-image:url('http://www.4freephotos.com/medium/batch/Branch-of-acacia-with-flowers777.jpg');
position: relative;
background-size: cover;
background-position: center center;
overflow: hidden;
border-radius: 10px 0 0 0;
height: 200px;
}
.t1_arrow {
position: absolute;
bottom: 0;
width: 60px;
border-left: 40px solid #cfcfcf;
border-right: 40px solid #cfcfcf;
border-top: 20px solid transparent;
}
.t1_content {
background-color: #cfcfcf;
height: 150px;
padding-top: 20px;
margin-bottom: 40px;
}HTML：
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
</div>
</div>回答 4
Stack Overflow用户
回答已采纳
发布于 2016-04-01 21:58:55
你知道箭头的宽度，所以如果你把它放在左边:50%；左边缘：-30px；，因为它的宽度是60px，所以每次它都居中。所以再加上这个
.t1_arrow {left:50%;margin-left:-30px;}Stack Overflow用户
发布于 2016-04-01 21:51:54
您可以使用下面这行代码：
left: calc((100% - 60px)/2);其中60 px是指箭头的宽度。不幸的是，并不是所有的浏览器都支持这种方法。为安全起见，将以下三行添加到.t1_arrow类中：
.t1-arrow {
left: 45%;
left: calc((100%-60px)/2);
left: -webkit-calc((100%-60px)/2);
}或者，您可以使用jquery在页面加载后设置高度：
$(function() {
$(".t1-arrow").each( function() {
var w = $(this).parent(0).width();
$(this).css('left',(w-60)/2 + 'px');
});
});Stack Overflow用户
发布于 2016-04-01 22:18:45
如果你只想让它水平居中，在你的Arrow的CSS中添加以下内容；
left: 0; right: 0;
margin: auto;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36357872
复制相关文章
相似问题