竹炉山房

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

方法：

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

<div class="dp-highlighter">
<div class="bar">
<pre class="EnlighterJSRAW" data-enlighter-language="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; */  
}</pre>
</div>
</div>

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

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

<div class="dp-highlighter">
<div class="bar">
<pre class="EnlighterJSRAW" data-enlighter-language="html">&lt;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="https://synyan.cn/t/../art-Gu-Kailai-420x0.jpg?x-oss-process=style/watermark_webp" alt="art-Gu-Kailai-420x0" width="420" height="295" align="right" border="0" /&gt;Political scandal ... Bo Xilai and his wife, Gu Kailai and son Bo Guagua.</pre>
</div>
</div>