html 图片和文字垂直居中显示

 时间:2024-10-12 03:05:35

1、在这里我用的是EditPlus,双击打开

html 图片和文字垂直居中显示

2、点击左上角,文件》新建》html网页

html 图片和文字垂直居中显示

3、在图片标签<img src="xxx" />之前加一个行内元素,比如加个<span></span>就行了。

html 图片和文字垂直居中显示

4、给外层div加上text-align:center;给span的样式display:inline-block;height:100%;vertical-align: middle;给图片加上vertical-align: middle;

html 图片和文字垂直居中显示

5、显示结果

html 图片和文字垂直居中显示

6、文字居中 设置行高line-height等于外层的高度就行了。

  • 如何利用HTML5和CSS3制作图片列表并展示效果
  • 在FrontPage中如何使用模板创建个人网站
  • CSS3鼠标悬停图片显示文字动画
  • css怎么嵌入到html
  • web的无序列表前导符怎么设置实心黑色圆
  • 热门搜索
    九九重阳节手抄报大全 致敬抗美援朝争做时代新人手抄报 七彩童年手抄报 英语手抄报内容5年级 说好普通话写好规范字手抄报 民族风俗手抄报 感恩教师节手抄报大全 尊师手抄报 手抄报装饰 金色童年手抄报