css - 将箭头图像放在底部边框上

Question

以下是我的 jsfiddle，我试图在底部边框上居中放置一个箭头图像，但我无法做到这一点。请告诉我如何放置箭头图像，以便无论盒子的宽度或高度如何，它都居中对齐？谢谢

http://jsfiddle.net/wn7JN/463/

.bubble 
{
    position: relative;
    width: 100px;
    height: 50px;
    padding: 0px;
    background: #FFFFFF;
    border: #000 solid 1px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.arrow:before 
{
    content: "";
    position: absolute;
    left: 50%;
    border-style: solid;
    border-width: 26px 26px 0;
    border-color: #000 transparent;
    display: block;
    width: 0;
    background-image:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
    z-index: 0;
}

Answer 1

试试这个。我添加了一些更改检查，

.bubble 
{
position: relative;
width: 600px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.arrow:before 
{
content: "";
position: absolute;
left: 50%;
    bottom:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
    margin:0 0 0 -26px;
}