Web前端学习—基础篇(20)_如何消除图片下方间隙、如何设置文本和图片对齐方式、如何让文本输入框和按钮之间对齐——vertical-align垂直布局方式

4.10、vertical-align属性 垂直对齐方式

4.10.1、属性

• vertical-align: top; 顶端对齐
• vertical-align: middle;中部对齐
• vertical-align: bottom; 底端对齐
• vertical-align: baseline; 默认值，基线对齐
• vertical-align: super;上标
• vertical-align: sub; 下标

4.10.2、使用

• 图片下方间隙问题
  • 将img标签转为块级元素display: block;
  • 为img标签设置vertical-align属性，属性值：top|bottom|middle
  • 在img标签的父元素上设置高度和overflow:hidden;
  • 在img标签的父元素上设置font-size:0; 或line-height:0;
• 文本和图片对齐方式的设置
• 文本输入框和按钮之间的对齐方式处理