text-indent
对于 wordPress 的正文内容和摘要,有时候我们喜欢给他按照 word 那样来个段落首行缩进,这是从小学开始写作文,语文老师就要求的格式了。
所以,对于从小养成的习惯,有的时候很难放弃。要实现也很简单,给主题正文或者摘要区域的文字内容P
标签加一个 CSS text-indent
就搞定了,比如:.entry
p{text-indent: 2em;}
。
可加了这个缩进后当遇到正文内容中有独立段落的图片时,图片也会被缩进,这样会很影响排版。而且对于缩进后的图片大小也不好把握,对于自适应主题尤其如此。所以很多人因为搞不定图片这个问题最后放弃了使用段落首行缩进。
其实 text-indent
有个很奇怪的属性,就是其内部元素遇到 float
或者display:
block
后就不继承外部这个缩进的属性了,也就是说,只要给图片加上 float
或者 display:
block
的 CSS 属性后,图片的缩进会自动失效。
WordPress 默认上传图片、插入图片后会带上aligncenter
、alignleft
、alignright
和 alignnone
的 class
,如果你对 aligncenter
、alignleft
、alignright
做了对应的
CSS 定义后,图片就不会受到外部 P
标签属性 text-indent
的影响,这
3 个class
属性在默认主题里的 CSS 定义如下:
- .alignleft {
- float: left;
- }
- .alignright {
- float: right;
- }
- .aligncenter {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
对于外链的图片,只要给他加上对应的 class 就可以了,比如:
- <img src="pic link" class="aligncenter OR alignright OR alignleft" style="display: block" />