关于知更鸟主题“关于本站”小工具中头像的居中布局美化工作,其实比较简单,一段CSS代码就可以搞定。代码来源【朱曙明的博客】,感谢作者提供!
6月4日,重新修改代码,代码来源【99八十一】博客,感谢“九哥”
美化方法,将下面样式代码添加主题选项→定制风格,“自定义样式”中。
- /** 修改关于本站css**/
- .about-img {
- text-align: center;
- background: url(https://wx2.sinaimg.cn/large/0066LGKLly1fjvq3dc19uj309q02sa9y.jpg) center center no-repeat;
- background-size: cover;
- height: 120px;
- border-radius:8px;
- margin: -10px -15px 30px;
- }
- .about-img img {
- float: none;
- border: 1px solid #ddd;
- border-radius: 50%;
- padding: 0px;
- height: auto;
- text-align: center;
- width: 120px;
- margin: 30px 0 0 0;
- }
- .about-name {
- text-align: center;
- font-size: 16px;
- position: relative;
- display: block;
- }
- .about-name {
- font-size: 16px;
- font-weight: 700;
- }
修改后效果
修改前效果
说明:最新版知更鸟主题已经支持头像居中显示,本博客不再使用此CSS。