img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。...

<a><img/></a>

　　这种结构有时候在界面预览的时候会出现一段多出来的高度。这个高度，一开始我很奇怪是什么原因产生的。鼠标移动到a标签上会有高度出现，一开始我以为是a标签的高度。可是我看a是隐藏的，隐藏的不是不会有高度撑开吗？而且我设置了a的各种属性都无法解决这个问题。后来，我就想这会不会是别的标签。比如是外头的div或者是img标签。我又对外头的div各种鼓捣，也还是没有一丁点的反应。行了，问题显现的差不多了。这个时候我就去搞一搞img，不搞不知道，一搞吓一跳。还真是这玩意儿出的问题。我记得img的属性真是的很特别。因为它是行内块状标签。然后我给img设置了display:block;之后，高度没了。真的，还真是这个毛病。恩，下次碰到这个问题，只要设置块状标签就行了。本人记性不太好，不记录一下下次又忘了。

 

还有一个问题就是：图片的水平垂直居中和自适应

我先来说说我以前是怎么解决的。以前我是用js解决这个问题的。可是后来，我发现css直接就能很方便的解决这个问题。当然了，不知道是不是适合所有的业务逻辑场景。但是至少最近我碰到的，可以这么用。为了下次方便找到这个方法，我也记录一下，毕竟我记性不好。

<div>
	<img src="1.png">
</div>

　div设置text-align:center。设置一个高度，line-height=height 就能将图片居中，当然还可以img设置vertical-align:middle  也是可以垂直居中的。

其实这是最基本。谁叫我记性不好加是只笨鸟呢。只能将其记下来了。

 

转载于:https://www.cnblogs.com/clear93/p/5598440.html