text-indent和图片缩进的问题

对于 WordPress 的正文内容和摘要,有时候我们喜欢给他按照 word 那样来个段落首行缩进,这是从小学开始写作文,语文老师就要求的格式了。

所以,对于从小养成的习惯,有的时候很难放弃。要实现也很简单,给主题正文或者摘要区域的文字内容P标签加一个 CSS text-indent 就搞定了,比如:.entry p{text-indent: 2em;}

可加了这个缩进后当遇到正文内容中有独立段落的图片时,图片也会被缩进,这样会很影响排版。而且对于缩进后的图片大小也不好把握,对于自适应主题尤其如此。所以很多人因为搞不定图片这个问题最后放弃了使用段落首行缩进。

其实 text-indent 有个很奇怪的属性,就是其内部元素遇到 float 或者 display: block 后就不继承外部这个缩进的属性了,也就是说,只要给图片加上 float 或者 display: block 的 CSS 属性后,图片的缩进会自动失效。

WordPress 默认上传图片、插入图片后会带上 aligncenteralignleftalignrightalignnoneclass,如果你对 aligncenteralignleftalignright 做了对应的 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" />

看看例子:

1、只是 alignnone,也就是不浮动也不居中,图片就跟着缩进了。

烂理由

2、只是 display: block,不浮动也不居中,只是定义了 css,图片不缩进了。

烂理由

3、aligncenter,也就是居中,相当于给加了 display: block 所以图片不缩进。

烂理由

4、左右浮动:alignleftalignright,也就是 float:leftfloat:right,图片不缩进,不过效果也只有 float:left 下看的出来,float:right 后图片就无所谓缩进了。

烂理由

烂理由

当然,其实还有一种方法,假如你文章内容中的图片都是独立成段,且图片宽度大到足够右边对齐,并居中显示,那么,只要让你的图片 padding-rightmargin-right 值设置成你缩进对应的值 2em,这样看起来,图片左右都空出了 2em 的值,图片的缩进虽然不能消除,但视觉上就显示成居中了,感觉就会好一些。

作者: LMS

天行贱,君子自强自息。

标签

《text-indent和图片缩进的问题》有3个想法

  1. 我是半路出家,没正经学过这些,天啊,我居然不知到text-index,看来外行终究是外行。
    不过我属于用多少学多少的人,不浪费。

发表评论

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