HTML图片和文本居中对齐

  • HTML图片和文本居中对齐已关闭评论
  • 194 次浏览
  • A+
所属分类:Web前端
摘要

原理比较简单就不上图片了你也许听说过在行元素中使用vertical-align: middle; 可以实现居中对其,但实际使用上,常常没有作用。
其实行元素有四条线分别是:

原理比较简单就不上图片了

你也许听说过在行元素中使用vertical-align: middle; 可以实现居中对其,但实际使用上,常常没有作用。
其实行元素有四条线分别是:

  • 顶线
  • 中线
  • 基线
  • 底线

默认行元素是基线对齐的(两个元素的基线在同一高度)
下面代码相当于图片的基线和文字的中线对齐(图片的基线就是中线)

<img src="xxx"> <span style=" vertical-align: middle;">文字</span> 

但是两个元素都是文字的话,两个元素都要加上 vertical-align: middle;才可以生效上下居中对齐的效果

<span style=" vertical-align: middle; font-size: 30px;">ABC</span> <span style=" vertical-align: middle; font-size: 20px;">ABC</span> 

这样布局很乱,有多个元素的情况下要不停地vertical-align: middle;不是很好用
推荐使用flex display: flex;align-items: center;

<div style="display: flex;align-items: center;">     <span style=" font-size: 30px;">文字</span>     <span style="font-size: 20px;">文字</span>     <span style="font-size: 10px;">文字</span> </div>