元素在div中底部显示
分类:实例代码
元素在div中底部显示属于前端实例代码,有关更多实例代码大家可以查看。
在实际应用中可能需要将一个元素在一个div中底部显示,下面就通过代码实例介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .box{ height:250px; width:250px; background:green; position:relative; } .inner{ width:50px; height:50px; background:red; position:absolute; bottom:0px; left:50%; margin-left:-25px; } </style> </head> <body> <div class="box"> <div class="inner"></div> </div> </body> </html>
代码将内部的div底部居中显示,实现的原理非常的简单就是讲父元素设置为相对定位,子元素使用绝对定位,然后设置资源在垂直方向是底部对齐,至于居中就是一个数学问题了,非常的简单不多介绍了。
相关阅读:
(1).相对定位参阅CSS的相对定位一章节。
(2).绝对定位参阅CSS的绝对定位一章节。
元素在div中底部显示,这样的场景在实际项目中还是用的比较多的,关于元素在div中底部显示就介绍到这了。