当浏览器窗口大小改变时,Div绑定到其他div

Question

我有以下问题:

无论浏览器窗口大小如何,语音气泡都应始终指向眼睛.

JSFiddle在这里

到目前为止,我有以下代码:

<div class="container1">
    <div class="container2">
         <button class="eye"></button>
         <div class="speech-bubble">View</div>
    </div>
</div>

哪里

.container1 {
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    width: 100%; }

.container1 > .container2 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;}

.speech-bubble {
    position: absolute;}

但这不起作用并产生上述输出.我能做些什么才能让它发挥作用？请不要jQuery解决方案,因为我使用Angular.

编辑:如果省略text-align: center,代码将达到预期的效果.但并不完全:我希望按钮居中!并且还有上述效果!我该怎么办？

Answer 1

成功地做到了这一点，没有太多的麻烦。改成.container2​

.container1 > .container2 {
    margin: 0 auto;
}

看到这个小提琴。