这个功能一直想要实现,但一直没有实现,今天忍不住加上去了。

方法:

1、在CSS中加入如下代码。

/* 图片caption加框 */  
  
.aligncenter,   
div.aligncenter {   
display: block;   
margin-left: auto;   
margin-right: auto;   
}   
  
.alignleft {   
float: left;   
}   
  
.alignright {   
float: rightright;   
}   
  
.wp-caption {   
border: 1px solid #ddd;   
text-align: center;   
background-color: #f3f3f3;   
padding-top: 4px;   
margin: 10px;   
/* optional rounded corners for browsers that support it */  
-moz-border-radius: 3px;   
-khtml-border-radius: 3px;   
-webkit-border-radius: 3px;   
border-radius: 3px;   
}   
  
.wp-caption img {   
/* margin: 0; */  
padding: 0;   
border: 0 none;   
}   
  
.wp-caption p.wp-caption-text {   
font-size: 11px;   
line-height: 17px;   
padding: 0 4px 5px;   
/* margin: 0; */  
}

2、用Live Writer写完后上传图片。然后在线用编辑器打开,点图片,在Caption属性中加入自己想要的文字即可。

默认效果演示:

art-353-bo-xilai-200x0
Bo Xilai. Photo: AFP.

可以在编辑器中看html代码如下。其中 align=”alignnone” 表示图片默认位置,alignright是右对齐,alignleft是左对齐,aligncenter是居中。因为都是CSS控制的,因此都需要在html编辑器中编辑。

<img class="wp-caption " style="border-style: initial; border-color: initial; margin-right: 5px; border-image: initial; border-width: 0px;" title="art-Gu-Kailai-420x0" src="http://talk.synyan.net/wp-content/uploads/2012/04/art-Gu-Kailai-420x0.jpg" alt="art-Gu-Kailai-420x0" width="420" height="295" align="right" border="0" />
Political scandal ... Bo Xilai and his wife, Gu Kailai and son Bo Guagua.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

6条评论