知更鸟主题“关于本站”小工具头像的居中布局美化

发布时间：

关于知更鸟主题“关于本站”小工具中头像的居中布局美化工作，其实比较简单，一段CSS代码就可以搞定。代码来源【朱曙明的博客】，感谢作者提供！

6月4日，重新修改代码，代码来源【99八十一】博客，感谢“九哥” 知更鸟主题“关于本站”小工具头像的居中布局美化

美化方法，将下面样式代码添加主题选项→定制风格，“自定义样式”中。

  1. /** 修改关于本站css**/
  2. .about-img {
  3.     text-align: center;
  4.     background: url(https://wx2.sinaimg.cn/large/0066LGKLly1fjvq3dc19uj309q02sa9y.jpg) center center no-repeat;  
  5.     background-size: cover;
  6.     height: 120px;
  7.     border-radius:8px;
  8.     margin: -10px -15px 30px;
  9. }
  10. .about-img img {
  11.     float: none;
  12.     border: 1px solid #ddd;
  13.     border-radius: 50%;
  14.     padding: 0px;
  15.     height: auto;
  16.     text-align: center;
  17.     width: 120px;
  18.     margin: 30px 0 0 0;
  19. }
  20. .about-name {
  21.     text-align: center;
  22.     font-size: 16px;
  23.     position: relative;
  24.     display: block;
  25. }
  26. .about-name {
  27.     font-size: 16px;
  28.     font-weight: 700;
  29. }

 修改后效果

知更鸟主题“关于本站”小工具头像的居中布局美化

修改前效果

知更鸟主题“关于本站”小工具头像的居中布局美化

说明：最新版知更鸟主题已经支持头像居中显示，本博客不再使用此CSS。