图片在父元素中上下居中(vertical-align的有效性)
在实际的使用中,会遇到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的有效性)的更多相关文章
- 让子元素在父元素中水平居中align-items
做案例中,我们会发现让子元素在父元素中垂直居中,要设置margin和padding等,各种设置才能垂直居中 现在可以使用CSS3中的align-items实现 align-items 定义子元素在父元 ...
- 解决图片把父元素向下撑大大约3px问题
现象 bug: 图片在div\li\dt 等 图片把父元素向下撑大大约3px <style> img { width: 30%; //这里由于 ...
- CSS子元素在父元素中水平垂直居中的几种方法
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...
- AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
- js操作DOM在父元素中的结尾添加子节点注意
impressionHtml=`<img src=${value} alt=""/>`; document.getElementById("wrapper&q ...
- css结构选择器组合使用,选择父元素中多个子元素中某一段元素
nth-of-type()和nth-child()写法一样,这里只用nth-of-type()演示,习惯type 直接上代码 /* 从前向后选择,第6个开始 */ li:nth-of-type(n+6 ...
- css如何让子元素在父元素中水平垂直居中
方法一: display:flex <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...
- line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现
>原创文章,转载请注明来源! 二.对行内元素(文字.图片.兄弟元素).块级元素设置line-height后的表现 对块级元素无效,对行内元素有效.可继承给行内元素. 文字的line-height ...
随机推荐
- Pending Statistics
Starting with the 11g Release 1 (11.1), when gathering statistics, you have the option to automatica ...
- git 上传本地文件到github
git 上传本地文件到github 1 git config --global user.name "Your Real Name" 2 git config --global u ...
- CodeIgniter配置之config
配置说明 $config['language']:指定项目语言包.需要注意的时Codeigniter自带的类库错误提示语言包位于/system/language/english/目录下,当这里配置非e ...
- mybatis中#{}和${}的区别
1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111&qu ...
- A类地址
一个A类IP地址由1字节(每个字节是8位)的网络地址和3个字节主机地址组成,网络地址的最高位必须是“0”.A类IP的地址第一个字段范围是0~127,但是由于全0和全1的地址用作特殊用途,实际可指派的第 ...
- mediastream2使用指南(转载)
http://blog.sina.com.cn/s/blog_59d649610100diui.html 定义 Filter: 媒体库中处理数据的组件.一个filter有0到数个输入流和0到数个输出流 ...
- JAVA基础知识之IO-File类
File类介绍 File是java.io包下面的一个类,代表与平台无关的文件或者目录.JAVA中,无论文件还是目录,都可以看作File类的一个对象.File类能对文件或目录新建,删除,获取属性等操作, ...
- Java中的String为什么是不可变的?
转载:http://blog.csdn.net/zhangjg_blog/article/details/18319521 什么是不可变对象? 众所周知, 在Java中, String类是不可变的.那 ...
- java ClassLoader与动态扩展
摘自:http://blog.csdn.net/moreevan/article/details/6654781
- JAVA的名词释义
JDK : Java Development Toolkit (java 开发工具包). JDK是整个JAVA的核心,包括了java运行环境(Java Runtime Envirnmet),一堆jav ...