inline-block
来源:互联网 发布:淘宝分享微信不能粘贴 编辑:程序博客网 时间:2024/06/06 02:24
1、居中
在设置inline-block居中时,往往会想到vertical-align: middle。但无论是加到父元素还是子元素上都无法使其相对于父元素垂直居中。
inline-block具有inline的属性,也就可以理解为它是一个可以设置宽高行内元素。行内元素!!行内元素居中,可以使用line-height。所以,设置父元素的line-height。如果父元素高度不固定,请参照之前写的博客。vertical-align: middle使其将垂直参照点(元素自身是有高度的)放在元素自身垂直的中心位置。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <style> .parent{ background-color:indianred; height: 300px; width:20%; line-height:300px; text-align: center; } .child1,.child2{ display: inline-block; width:20px; vertical-align: middle; } .child1{ background-color: aquamarine; height: 20px; } .child2{ background-color: blue; height: 60px; } </style></head><body><div class="parent"> <div class="child1"></div> <div class="child2"></div></div></body></html>
2、间隙
页面布局时,常常设置元素为inline-block,但是,元素之间会有间隙。平常有个间隙也就不太在意,但在设置如两个元素各占50%时,会发现因为有间隙而被挤到下一行去。刚才说到了inline-block是一个可以设置宽高的行内元素,这里,我们可以将其理解为一个文字或者字母。浏览器会给这些一个font-size。于是,我们将其父元素设置font-size:0,就可以解决了。为什么设置本身的font-size无效呢?等同于这样一个段落<p>abc</p> ,其字体大小应该在p元素上设置。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <style> .parent{ font-size: 0; width:100%; } .child1,.child2{ display: inline-block; width:50%; height:40px; } .child1{ background-color: aquamarine; } .child2{ background-color: blue; } </style></head><body><div class="parent"> <div class="child1"></div> <div class="child2"></div></div></body></html>
0 0
- inline block inline-block
- block inline inline-block
- inline-block
- inline-block
- inline-block
- inline-block
- block & inline
- inline-block
- inline-block
- inline-block
- display:inline、block、inline-block
- display:inline、block、inline-block
- block,inline和inline-block
- 区分block,inline,inline-block
- display:inline、block、inline-block
- Study《block、inline、inline-block》
- block,inline和inline-block
- block、inline、inline-block对比
- 上下文菜单与上下文操作模式
- iOS开发网络篇之文件下载、大文件下载、断点下载
- Loadrunner analysis启动报错
- html5的画布学习小总结
- Division by zero in
- inline-block
- 自定义checkbox样式
- 系统性能调优-缓存
- Android中SQLite应用详解
- jquery 事件
- linux处理 ^M
- Lucene--简单的写与读
- 解决您配置文件中的设置 (空密码的 root) 与 MySQL 默认管理员账户对应。
- [最值问题]最长递增子序列