怎么应用vertical-align,才能生效?
vertical-align 的使用
,所以得用vertical-align:middle。然而用的时候总是无效,查了资料和实践后,终于知道vertical-align的用法了!
一、当父元素设置了line-height
- 父元素(inline-block\block)必须含有line-height(inline元素有无皆可),子元素中的(inline-block/inline元素)vertical-align才能起作用。
- vertical-align不可继承,必须对子元素单独设置。
关于定义——
值 | 描述 |
长度 | 通过距离升高(正值)或降低(负值)元素。'0cm'等同于'baseline' |
百分值 – % | 通过距离(相对于1line-height1值的百分大小)升高(正值)或降低(负值)元素。'0%'等同于'baseline' |
baseline | 默认。元素的基线与父元素的基线对齐。 |
sub | 降低元素的基线到父元素合适的下标位置。 |
super | 升高元素的基线到父元素合适的上标位置。 |
top | 把对齐的子元素的顶端与line box顶端对齐。 |
text-top | 把元素的顶端与父元素内容区域的顶端对齐。 |
middle | 元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。 |
bottom | 把对齐的子元素的底端与line box底端对齐。 |
text-bottom | 把元素的底端与父元素内容区域的底端对齐。 |
inherit | 采用父元素相关属性的相同的指定值。 |
关于作用环境——
- 所谓inline-block水平的元素,即可以与inline水平元素混排,又能设置高宽属性的元素,例如图片,按钮,单复选框,单行/多行文本框等HTML控件,只有这些元素默认情况下会对vertical-align属性起作用。
- 对inline元素设置vertical-align是有作用的,只是要重新设置line-height的值,否则继承了父元素的line-height只能垂直居中。
<span class="box"> <span class="dot"></span> 我是一段卡哇伊的文字。 </span>
.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white;vertical-align:top;}
<div class="outerbox">
<img src="C:\Users\Administrator\Desktop\test.jpg"/>
<span>这是外层元素的内部文字</span>
</div>
.outerbox{width:300px; line-height: 300px;font-size: 16px; }
.outerbox img{width: 30px; height:30px; vertical-align: bottom;}
.outerbox span{vertical-align: top;}
二、当父元素没有设置line-height时,inline/inline-block子元素之间对齐。
- 当父元素没有设置line-height时,只对行内元素的兄弟元素对齐有用,无法子元素居中对齐父元素。
- 设置了vertical-align:middle的子元素的中线与兄弟元素的基线对齐。若兄弟元素都设置该项,则居中对齐。
<div style="height:200px">
<img src="C:\Users\Administrator\Desktop\桌面\gallery4.jpg" style="width:50px;vertical-align:middle;">
<span style="vertical-align:middle">hahahahhah</span>
</div>
怎么应用vertical-align,才能生效?的更多相关文章
- 创建MySQL用户 赋予某指定库表的权限 flush privileges才能生效!!!!;@'localhost'授权本地,@'%'授权远程
update ERROR 1364 (HY000): Field 'ssl_cipher' doesn't have a default value 建议使用GRANT语句进行授权,语句如下: gra ...
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- Idea使用记录--每次修改JS文件都需要重启Idea才能生效解决方法
最近开始使用Idea,有些地方的确比eclipse方便.但是我发现工程每次修改JS或者是JSP页面后,并没有生效,每次修改都需要重启一次Tomcat这样的确不方便.我想Idea肯定有设置的方法,不可能 ...
- JSP的改动需要重启应用服务器才能生效?
PLM的版本由2013版升级到2016版,部署到应用服务器tomEE的war包也更新了,今天在Linux服务器上hot fix一个JSP页面的时候发现改动没有生效,要重启tomEE才生效,纳闷了一下才 ...
- idea中war和war exploded的区别及修改jsp必须重新启动tomcat才能生效的问题
刚开始使用idea,发现工程每次修改JS或者是JSP页面后,并没有生效,每次修改都需要重启一次Tomcat这样的确不方便.我想Idea肯定有设置的方法,不可能有这么不方便的功能存在. 需要在Tomca ...
- Idea-每次修改JS文件都需要重启Idea才能生效解决方法
最近开始使用Idea,有些地方的确比eclipse方便.但是我发现工程每次修改JS或者是JSP页面后,并没有生效,每次修改都需要重启一次Tomcat这样的确不方便.我想Idea肯定有设置的方法,不可能 ...
- 修改JS文件都需要重启Idea才能生效解决方法
最近开始使用Idea,有些地方的确比eclipse方便.但是我发现工程每次修改JS或者是JSP页面后,并没有生效,每次修改都需要重启一次Tomcat这样的确不方便.我想Idea肯定有设置的方法,不可能 ...
- 更改windows服务的配置文件(app.config)必须重启服务才能生效吗?
这个问题是前一阶段写windows服务碰到的.本来在写获取配置文件的某个配置的值的时候,通常我都是写类似下面的这么一个静态方法来获取: 1: /// <summary> 2: /// 获取 ...
- 父容器的flowover:hidden 必须配合父容器的宽高height width才能生效
有时候 给父容器 加上了 flowover:hidden 这个css后, 其中的子元素为什么仍然会跑出来? 解决的根本方法就是要给 父容器 加上具体的一个宽度, 或高度. (而这个宽度和高度, 其实你 ...
随机推荐
- jQuery学习笔记—— .html(),.text()和.val()的使用
本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法.jQuery中为我 ...
- PAT (Advanced Level) 1019. General Palindromic Number (20)
简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...
- JS——无缝滚动
1.描述——无缝滚动图片 2.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
Asp.net Mvc 未能加载类型“System.Web.Mvc.ViewPage 的解決方法 2010-11-30 17:31:51| 分类: .net mvc |举报 |字号 订阅 如果多 ...
- servlet与CGI的区别
与cgi的区别在于servlet处于服务器进程中,它通过多线程方式运行其service方法,一个实例可以服务于多个请求,并且其实例一般不会销毁,而CGI对每个请求都产生新的进程,服务完成后就销毁,所以 ...
- POJ 2686 Traveling by Stagecoach
状压DP dp[s][p]用了哪几张票,到哪个节点的最小费用. 注意:G++ %.3lf输出会WA,但C++能过:改成%.3f,C++,G++都能AC #include<cstdio> # ...
- (简单) POJ 2492 A Bug's Life,二分染色。
Description Background Professor Hopper is researching the sexual behavior of a rare species of bugs ...
- IOS FMDB模糊查询
http://blog.sina.com.cn/s/blog_9630f1310101fx1d.html /查询记录 -(NSArray*)selectitemDream_desc:(JiemengS ...
- linux获得目录下文件个数
获得当前目录下文件个数赋值给变量panonum: panonum=$(ls -l |grep "^-" | wc -l) 获取指定目录下文件个数赋值给指定变量: panonum=$ ...
- RFID射频卡超市购物结算系统
RFID射频卡超市购物结算系统 这段时间在做RFID射频卡超市购物结算系统,这个系统的设想来自于大学研究课题,但是我们在淘宝网上购买设备的时候淘宝店主都认为RF射频技术不好应用在超市购物结算系统,原因 ...