将png图像浮动在其他图像之上

Question

所以，我试图在彼此的顶部排列2行，每行包含bootsrtap 3中的2列。每列具有不同的背景颜色并占据屏幕的一半。 我想在第2行开始之前放置一个小的png img然后将它居中。问题是png图像将完全分离2行，并为自己创建一个块。在png图像的两侧都有白色背景。我需要将两行保持在一起，但是如何？

＆＃13;

＆＃13;

    #row-polygon {
      display: block;
      width: 100%
      margin: none;
      padding: none;
      overflow: hidden;
    }
    #divpolygon-top-left {
      display: inline-block;
      background: #992233;
      height: 250px;
    }
    #divpolygon-top-right {
      display: inline-block;
      background: #aa4433;
      height: 250px;
    }
    #dot {
      position: relative;
    margin: 0 auto;
    }
    #divpolygon-bottom-left {
      display: inline-block;
      background: #229955;
      height: 250px;
    }
    #divpolygon-bottom-right {
      display: inline-block;
      background: #44bb77;
      height: 250px;
    }

＆＃13;

    <section id="section-polygon">
            <div class="row-polygon">
                <div id="divpolygon-top-left" class="col-xs-6">
                    <h3>Reason 1:</h3>
                </div>
                <div id="divpolygon-top-right" class="col-xs-6">
                    <h3>Reason 2:</h3>
                </div>
            </div>
            <div><img id="dot" src="images/stop.jpg"></img></div>
            <div class="row-polygon">
                <div id="divpolygon-bottom-left" class="col-xs-6">
                    <h3>Reason 3:</h3>
                </div>
                <div id="divpolygon-bottom-right" class="col-xs-6">
                    <h3>Reason 4:</h3>
                </div>
            </div>

        </div>
    </section>

＆＃13;

＆＃13;

＆＃13;