前端浅谈:CSS调整图片居中显示

在wordpress中,虽然有将图片居中显示的可视化调整工具,但每次调整每张图片都要做调整总是一件很繁琐的事情。这几天,本小子一直在寻找本博客中博文出现的图片居中显示的方法,一直到今天,总算搞定了这事,这里要非常感谢这篇文章《How to center images with CSS》。嘿嘿,本小子现在遇到问题事,渐渐喜欢上了用英文放狗搜。

根据这篇文章给出的方法,本小子先在firefox里打开一篇有图片的博文(在调整为居中之前,原图片都是左对齐的),在css查看器里添加上面这篇文章里图片居中的代码:

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

然后在博文对应的图片处,按照给出的代码实例<img src="images/yourimagefile.jpg" class="center" />在博文对应的图片处添加了class="center"属性,测试发觉真的居中了。可是,在博客主题中一直都没找到往图片添加class="center"属性的位置。捣鼓测试了半天,还是没搞定,最后不得不返回来琢磨上面那段CSS代码。想了老半天,凭本小子以前学过的编程语言的感觉,.center这货应该是属于img属性的,也就是把上面那段代码合并到img里是完全没问题的,并且可以实现图片居中显示。为了验证这一推测是否正确,本小子在firefox里测试了一下,果然是这样(firefox对于调试页面元素非真心好用,感谢firefox)。

将调整图片居中显示的代码添加进CSS文件后,本小子博客主题的img属性是这样的:

img{
	max-width:100%;
	margin:20px auto;
	height:auto;
	border:0;
	outline:0
	-webkit-box-shadow: 1px 4px 16px 8px #5CA2BE;
    -moz-box-shadow: 1px 4px 16px 8px #5CA2BE;
    box-shadow: 1px 4px 16px 8px #5CA2BE;
    /*set the images aligned*/
    display: block;
    margin-left: auto;
    margin-right: auto;
	}

上面/*set the images aligned*/后面部分即是添加图片居中显示的代码。简单的三句话,完美解决图片排版的问题。

comments powered by Disqus