inline-block元素出现位置错位的解决方法
2024-09-25 04:47:37
如下代码所示:
<div class="container">
<div style="display: inline-block; height: 100px; width: 100px;"><img src="/myImg.jpg"></div>
<div style="display: inline-block; height: 100px; width: 100px;">Good Morning! Sir!</div>
<div style="display: inline-block; height: 100px; width: 100px;"></div>
</div>
容器container的子元素均为inline-block显示,而当子元素中存在图片或文字的时候,子元素的显示会显然不在水平线上,即有的元素会下沉,这一现象与行内元素的对齐有关,要解决该问题,可用vertical-align属性,如下:
<div class="container">
<div style="display: inline-block; height: 100px; width: 100px; vertical-align: middle;"><img src="/myImg.jpg"></div>
<div style="display: inline-block; height: 100px; width: 100px; vertical-align: middle;">Good Morning! Sir!</div>
<div style="display: inline-block; height: 100px; width: 100px; vertical-align: middle;"></div>
</div>
vertical-align取middle,top,bottom值均可。
最新文章
- SQL SELECT 语句
- ubuntu Apache 2命令
- U3D assetbundle加载与卸载的深入理解
- css -- 题目汇总
- IBInspectable / IBDesignable
- myeclipse9 struts2配置
- The Nerd Factor SPOJ - MYQ5
- kubernetes入门实践
- 51 nod 1203 JZPLCM
- 数据库 MySQL进阶之索引
- SQL练习题-50道SQL练习题及答案与详细分析
- Day 18 常用模块(二)
- for循环输出菱形的形状【java】
- 5、爬虫系列之scrapy框架
- [Tensorflow] Cookbook - CNN
- 16节实用性爆棚的Ps课:零基础秒上手,让你省钱也赚钱
- 更新user的方法
- 测试开发面试的Linux面试题总结之二:常用命令
- map area 标签的使用
- LVS 负载均衡原理详解
热门文章
- 《DSP using MATLAB》示例Example 8.13
- matlab调用c程序(转载)
- piwik docker 安装
- Errors running builder &#39;DeploymentBuilder&#39; on project &#39; 解决方法
- expdp实现oracle远程服务器导出到本地
- 求助OPC Opc.IDiscovery m_discovery = new OpcCom.ServerEnumerator();
- Renesas 符号地址空间对齐
- 安装MySQL-python 的问题
- Service的用法
- Java并发-Runnable、Callable、Future、Future Task