Heim >Web-Frontend >HTML-Tutorial >img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。_html/css_WEB-ITnose
<a><img / alt="img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。_html/css_WEB-ITnose" ></a>
这种结构有时候在界面预览的时候会出现一段多出来的高度。这个高度,一开始我很奇怪是什么原因产生的。鼠标移动到a标签上会有高度出现,一开始我以为是a标签的高度。可是我看a是隐藏的,隐藏的不是不会有高度撑开吗?而且我设置了a的各种属性都无法解决这个问题。后来,我就想这会不会是别的标签。比如是外头的div或者是img标签。我又对外头的div各种鼓捣,也还是没有一丁点的反应。行了,问题显现的差不多了。这个时候我就去搞一搞img,不搞不知道,一搞吓一跳。还真是这玩意儿出的问题。我记得img的属性真是的很特别。因为它是行内块状标签。然后我给img设置了display:block;之后,高度没了。真的,还真是这个毛病。恩,下次碰到这个问题,只要设置块状标签就行了。本人记性不太好,不记录一下下次又忘了。
还有一个问题就是:图片的水平垂直居中和自适应
我先来说说我以前是怎么解决的。以前我是用js解决这个问题的。可是后来,我发现css直接就能很方便的解决这个问题。当然了,不知道是不是适合所有的业务逻辑场景。但是至少最近我碰到的,可以这么用。为了下次方便找到这个方法,我也记录一下,毕竟我记性不好。
<div> <img src="1.png" alt="img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。_html/css_WEB-ITnose" ></div>
div设置text-align:center。设置一个高度,line-height=height 就能将图片居中,当然还可以img设置vertical-align:middle 也是可以垂直居中的。
其实这是最基本。谁叫我记性不好加是只笨鸟呢。只能将其记下来了。