一个菜鸟的互联网技术分享博客
您的位置: 主页 > 图片和文字并行且文字上下居中
advertisement

图片和文字并行且文字上下居中

在一个dede的交流群里碰到有人问到了这个问题,心血澎湃的看了一看然后再随便写了几行垃圾代码。。。
话不多说,上代码


  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>aaaa</title>  
  5.     <script type="text/javascript" src="http://www.zhangren.online/zhangren/jquery.min.js"></script>  
  6. </head>  
  7. <body>  
  8.     <div class="aaa" style="position: relative;">  
  9.         <img src="https://d3o1694hluedf9.cloudfront.net/sierra-750.jpg" id="target">  
  10.         <span class="bbb" style="vertical-align: top;width: 250px;display: inline-block;word-wrap : break-word;position: absolute;">www.zhangren.onlinewww.zhangren.onlinewww.zhangren.onlinewww.zhangren.onlinewww.zhangren.onlinewww.zhangren.online</span>  
  11.     </div>  
  12.       
  13. </body>  
  14. <script type="text/javascript">  
  15. //分析:使用定位(父相子绝)处理,获取存放图片和文字父级盒子的高度除以2(就相当于top:50%,这个是给存放文字盒子设置的),然后再获取存放文字的盒子的高度除以2就可以了  
  16. $(function(){  
  17.     var a_h = $('.aaa').height()  //父级盒子的高度  
  18.     var b_h = $('.bbb').height()  //存放文字盒子的高度  
  19.     $('.bbb').css('top',(a_h / 2) - (b_h / 2))  
  20. })  
  21. </script>  
  22. </html>  

zhangren.online
上一篇:关于Element ui Transfer (穿梭框)使用心得
下一篇:没有了

您可能喜欢

​javascript小数乘法精确率填坑

​javascript小数乘法精确率填坑

​boostrap之模态框取消按钮事件

​boostrap之模态框取消按钮事件

​使input文本框不可编辑的3种方法

​使input文本框不可编辑的3种方法

​canvas作图

​canvas作图

回到顶部