百度分享代码无法水平居中的解决方法

所属分类: 网站运营 / 建站经验 阅读数: 91
收藏 0 赞 0 分享

百度在搜索结果中偏爱自己的产品是无用质疑的,所以,越来越多的站长决定给网站页面加上百度分享代码。

不过在代码居中碰到郁闷的事:一般在div层中加入style="text-align:center;" 即可完成居中了,可是发现常用的居中方法对百度分享代码无效。

解决方法有二种,最终效果如下:


第一种:通过在百度分享代码的最前面增加语句:
<div style="width:120px;float:left;">&nbsp;</div>,然后通过调节<div style="width:120px; float:left;">&nbsp;</div> 这个层的宽度达到定位百度分享代码所在的层位置,使的其向右移动。

代码如下:


复制代码
代码如下:

<!-- 需要调节宽度的层 -->
<div style="width:120px;float:left;">&nbsp;</div>
<!-- Baidu Button BEGIN -->
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare" >
<span class="bds_more">分享收藏到:</span>
<a class="bds_qzone">QQ空间</a>
<a class="bds_tsina">新浪微博</a>
<a class="bds_tqq">腾讯微博</a>
<a class="bds_renren">人人网</a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours();
</script>
<!-- Baidu Button END -->

第二种:通过给百度分享代码添加一个外层,即<div style="text-align:cennter; padding-left:30px;"> 此处放置百度分享代码 </div>,可实现居中(padding-left 的数值用于对位置进行微调)。

代码如下:


复制代码
代码如下:

<!-- 外层 -->
<div style="text-align:cennter; padding-left:30px">
<!-- Baidu Button BEGIN -->
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare" >
<span class="bds_more">分享收藏到:</span>
<a class="bds_qzone">QQ空间</a>
<a class="bds_tsina">新浪微博</a>
<a class="bds_tqq">腾讯微博</a>
<a class="bds_renren">人人网</a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours();
</script>
<!-- Baidu Button END -->
</div>

这样就可以实现百度分享代码的水平居中了!

最后,提示各位站长,为了加快网页的加载速度,最好把所有的js文件放到页面的底部,<div>里的内容放到需要显示分享代码的页面位置。

更多精彩内容其他人还在看

了解知乎网站的架构演进史

这篇文章主要介绍了了解知乎网站的架构演进史,知乎使用Python的异步框架Tornado的经验事例非常经典,值得Python学习以及爱好者们借鉴,需要的朋友可以参考下
收藏 0 赞 0 分享

企业网站要做成什么样子?是营销型网站还是官网展示

营销型网站建设是对网站的发展,整合了各种网络营销理念和网站运营管理方法,不仅注重网站建设的专业性,更加注重网站运营管理的整个过程,那么企业网站要做成什么样子?是营销型网站还是官网展?下面我们来看看吧
收藏 0 赞 0 分享

WEB标准之内容结构表现和行为到底怎么分离

从标准到国人重视那天起,就已经讨论了,但是停留在div+css xhtml+css 纯代码的分离,思想上流程上,到底如何分离
收藏 0 赞 0 分享

从网站设计到网站运营:网站建设中的六宗罪.

许多的网站越做越差,这是什么原因呢?今天小编就为大家带来一个网站从从网站设计到网站运营:网站建设中的六宗罪. 朋友们可以一起看看
收藏 0 赞 0 分享

云端架构助力魅族应用商店运维的案例分享

这篇文章主要介绍了云端架构助力魅族应用商店运维的案例分享,包括自研的Kiev框架通讯与分布式存储的使用等,非常具有借鉴意义,需要的朋友可以参考下
收藏 0 赞 0 分享

实例解析:如何做好企业网站的内容更新?

如何做好企业网站的内容更新?很多朋友都不是很清楚下面以轮滑网站为例探讨企业网站内容更新怎样做才更有档次,有需要的朋友可以过来参考一下,来看看吧
收藏 0 赞 0 分享

新手必看——电影贴吧引流都有哪些技巧

今天,我给大家讲讲电影贴吧引流都有哪些技巧,这个很适合新手,对贴吧引流都有哪些技巧感兴趣的朋友参考下
收藏 0 赞 0 分享

京东商城的云计算优先的技术战略简要总结

这篇文章主要介绍了京东的云计算优先的技术战略的简要总结,京东在Spark集群方面所投入的开发研究令人印象深刻,需要的朋友可以参考下
收藏 0 赞 0 分享

解析京东的大数据在运营中的实际应用

这篇文章主要介绍了京东的大数据在运营中的实际应用的案例,包括用户分析和企业管理决策等多方面的运用解析,需要的朋友可以参考下
收藏 0 赞 0 分享

探究京东咚咚架构演进

本文带领大家探究京东咚咚架构演进史, 自从京东开始为第三方卖家提供入驻平台服务后,咚咚也就随之诞生了,今天就和大家一起走进咚咚
收藏 0 赞 0 分享
查看更多