2个div没有换行！！如何让其中一个刚好在另一个的正下方？

图片说明

在这段字符串里，我想让这个#abc在这个#img的正下方！！，如何实现！！

*{margin:0;padding: 0} .fn-clear{overflow:auto;_height:1%} .fn-left{float:left} .fn-right{float:left} .vm{vertical-align: middle} .ml5{margin-left: 5px} .dib { display: inline-block; } .ui-loadingNum { background: #d2d0d1; height: 13px; padding: 2px; width: 123px; } .ui-loadingNum_bar { background: #ff9c0d; height: 13px; vertical-align: middle; } #div1{margin: 100px}

投资进度：

        <div class="fn-left vm">
            <div class=" ui-loadingNum dib vm">
                <div style="width: 80%;" class="ui-loadingNum_bar"></div>
            </div>
        </div>
        <div class="fn-left ml5"> 80%</div>
    </div>
</div>

 <!DOCTYPE html>
<html>
<body>
<div style='text-align:center;'>
<img src="https://www.baidu.com/img/bd_logo1.png"/>
</div>
<div style='text-align:center;'>abc</div>
</div>
</body>
</html>

float:clearboth

div#img 用的是背景图片不是图片，这样的话，div#img需要有高度和宽度，然后设置背景图片居中，在设置div#ABC 字体居中。
图片居中css

background: url($(picture)) no-repeat center center transparent;
背景图片这样就是绝对上下左右居中了，字体就正好在下方了

你可以用绝对定位试试