在实际的使用中,会遇到img上下居中的问题:

  1.一般情况下,将其放置在table中:可以自动的上下居中。

 

  2.另外一种情况<即一般情况下>

    以li中为例子:在无序列表中 li元素下的img属性(vertical-align:middle),无法实现上下居中效果。

    解决方法:

    CSS样式

    <style type="text/css">
    li {
     width:500px;
     height:200px;
     border:#CCFF00 1px solid;
     vertical-align:middle;
     text-align:center;
     display:table-cell
    }
    span {
     display:inline-block;
     height:100%;
     vertical-align:middle
    }
    img {
     vertical-align:middle
    }
    </style>

    HTML结构

    <li><span></span><img src="momoe.jpg" width="79" height="39" /></li>

    此方法是在li元素中增加一个span元素,通过设置span元素的样式,从而达到img元素居中的效果。

    * 或者将span元素替换为一个img{height:100%;width:0;}也可以达到同样的效果。

     两者之间的区别是,span元素(辅助元素)需要设置vertical-align:center样式,而img元素(辅助元素)不需要设置。

   3. 一种较简便的方法:

     将父级元素的line-height和height参数设置为相同大小,且img需要设置vertical-alilgn:middle;

图片在父元素中上下居中(vertical-align的有效性)的更多相关文章

  1. 让子元素在父元素中水平居中align-items

    做案例中,我们会发现让子元素在父元素中垂直居中,要设置margin和padding等,各种设置才能垂直居中 现在可以使用CSS3中的align-items实现 align-items 定义子元素在父元 ...

  2. 解决图片把父元素向下撑大大约3px问题

    现象  bug: 图片在div\li\dt 等  图片把父元素向下撑大大约3px  <style>         img {             width: 30%; //这里由于 ...

  3. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  4. AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

  5. js操作DOM在父元素中的结尾添加子节点注意

    impressionHtml=`<img src=${value} alt=""/>`; document.getElementById("wrapper&q ...

  6. css结构选择器组合使用,选择父元素中多个子元素中某一段元素

    nth-of-type()和nth-child()写法一样,这里只用nth-of-type()演示,习惯type 直接上代码 /* 从前向后选择,第6个开始 */ li:nth-of-type(n+6 ...

  7. css如何让子元素在父元素中水平垂直居中

    方法一: display:flex <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  9. line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现

    >原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...

随机推荐

  1. Pending Statistics

    Starting with the 11g Release 1 (11.1), when gathering statistics, you have the option to automatica ...

  2. git 上传本地文件到github

    git 上传本地文件到github 1 git config --global user.name "Your Real Name" 2 git config --global u ...

  3. CodeIgniter配置之config

    配置说明 $config['language']:指定项目语言包.需要注意的时Codeigniter自带的类库错误提示语言包位于/system/language/english/目录下,当这里配置非e ...

  4. mybatis中#{}和${}的区别

    1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111&qu ...

  5. A类地址

    一个A类IP地址由1字节(每个字节是8位)的网络地址和3个字节主机地址组成,网络地址的最高位必须是“0”.A类IP的地址第一个字段范围是0~127,但是由于全0和全1的地址用作特殊用途,实际可指派的第 ...

  6. mediastream2使用指南(转载)

    http://blog.sina.com.cn/s/blog_59d649610100diui.html 定义 Filter: 媒体库中处理数据的组件.一个filter有0到数个输入流和0到数个输出流 ...

  7. JAVA基础知识之IO-File类

    File类介绍 File是java.io包下面的一个类,代表与平台无关的文件或者目录.JAVA中,无论文件还是目录,都可以看作File类的一个对象.File类能对文件或目录新建,删除,获取属性等操作, ...

  8. Java中的String为什么是不可变的?

    转载:http://blog.csdn.net/zhangjg_blog/article/details/18319521 什么是不可变对象? 众所周知, 在Java中, String类是不可变的.那 ...

  9. java ClassLoader与动态扩展

    摘自:http://blog.csdn.net/moreevan/article/details/6654781

  10. JAVA的名词释义

    JDK : Java Development Toolkit (java 开发工具包). JDK是整个JAVA的核心,包括了java运行环境(Java Runtime Envirnmet),一堆jav ...