码网站码着码着遇到需要用到图片居中的地方,本来是个小问题,但是深入思考一下对整体css及html架构有新的认识。在此记录一下。(说白了还是太辣鸡)

前情概要

因为习惯了Markdown,所以我们先看看MD中对插入图片的HTML翻译。MD插入图片格式如下:

![tag](url)

其通过MD解释器转换为html为:

<img title="name" alt="name" src="url">

常规的插入图片写法入下:

<a href=""><img src="url"></a>

如果需要进行对图片的HTML格式处理可以参考另外一篇文章:
Markdown语法下点击图片放大效果

原理说明

感谢@SpaceCat提供思路:简书 - CSS设置图片水平居中

无论是MD解释器解析还是常规的插入图片,<img>标签都是被包裹在<p>,<a>,甚至<div>这些父级块状标签中。

我们要明白:img标签是行内元素(inline),不是块元素(block)
此处划重点!!!重点!!!
所以不能通过常规对block元素使用的margin:auto来设置图片居中(博主之前就一直犯了这个xx问题(ಥ_ಥ))我们应该和设置文字居中一样使用text-align=center来设置图片居中。

通常我们要设置单个图像居中显示可以对img标签使用简单的align=“center”(该方法从HTML4开始就不推荐了)
对于博客或者大型网站维护我们就不能采用这种办法,而应该去设置css表来全局修改。

如果通过这种方法来设置居中,就需要CSS中有一个选择器能够选中包含img元素的父级元素。然而,到目前,CSS还没有这样一个选择器。原因如下:

CSS does not include parent selectors (a method of styling a parent based on what children it contains). This fact has been stackflow posters, but it turns out there is a very good reason for its absence. Particularly in the early days of the Internet, it was considered critically important that the page be renderable before the document has been fully loaded. In other words, we want to be able to render the beginning of the HTML to the page before the HTML which will form the bottom of the page has been fully downloaded.

A parent selector would mean that styles would have to be updated as the HTML document loads. Languages like DSSSL were completely out, as they could perform operations on the document itself, which would not be entirely available when the rendering is to begin.

其实现在新的标准也对这种方法支持,但还是不推荐,具体可以参考:知乎 - CSS 中能否选取父元素?

实现方法

既然img不是块元素,那我们就把它变成块元素就行啊!!
(亏我想半天,这么简单的方法没想到(ಥ_ಥ))

在css文件中增加以下代码,实现全局修改:

img {
    display:block;
    margin:0 auto;
}

实现方法很简单,重要的是需要理解img是一个inline元素,并且明白为什么我们不通过选择父级元素的方法来设置。