zoukankan      html  css  js  c++  java
  • 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  也是可以垂直居中的。

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

  • 相关阅读:
    日期格式不合法
    DataGridView的Scrollbar通過編程不能自動下滾
    Sourcesafe shadown backup
    共享目錄突然不工作 
    VS2005編譯后版本如何控制
    WebBrowser用作RichTextBox
    怎樣設定MS Reporting自動橫向列印
    VSS 2005不需登錄,直接開啟的方法
    subreport cannot be shown
    An Algorithm Summary of Programming Collective Intelligence (5)
  • 原文地址:https://www.cnblogs.com/clear93/p/5598440.html
Copyright © 2011-2022 走看看