首頁 > web前端 > html教學 > img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:15:19
原創
1310 人瀏覽過

<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  也是可以垂直居中的。

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

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板