Question

我的css箭头位于我的div的大小。

这是jsbin，显示了它的实际效果。

无论div是什么高度，我怎样才能将箭头放在div的中间位置？

Answer 1

我是通过改变你计算top的方式来做的，所以在这种情况下使用“calc”并减去border-width。

top: calc(50% - 10px)

这是一个有效的jsbin。

Answer 2

当您使用position: absolute时，您可以将这样的事情集中在这里：

position: absolute;
top: 50%;
transform: translateY(-50%);

top: 50%将父母身高的50％分配到顶部

transform: translateY(-50%)将元素向上移动元素高度的50％。

无论元素的高度或父级的高度如何，此方法都有效。

您也可以使用它来水平居中：

position: absolute;
left: 50%;
transform: translateX(-50%);

或纵向和横向：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

http://jsbin.com/lixisidezu/1/edit?html,css,output

Answer 3

你实际上并不需要CSS3; CSS2足够且没有太多的hackishness：http://jsbin.com/civijuvofo/1/edit?html,css,output - 其实质是top: 50%; margin-top: -10px;。

特别是，您可以使用top: 50%;将白色+灰色三角形放在中间位置框的中间位置。然后它们太低了 - 它们从50％的中点开始，但它们下降到50％+ 2 *边界宽度。您可以使用css3 calc进行补偿，或使用css3转换，但最兼容的黑客只是应用一个等于边框宽度的负上边距。

这意味着你的“箭头”扇出然后在CSS中看起来如下：

.container:before, .container:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 100%;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.container:before {
    margin-top:  -11px;
    border-width: 11px;  
    border-right-color: #dedede;
}

.container:after {
    margin-top:  -10px;
    border-width: 10px;
    border-right-color: #fff;
}

在过去10到15年间发布的任何浏览器中都可以使用跨浏览器。我不确定IE7： - ）。

位置css箭头中途下降div

3 个答案: