首页
> 计算机技术
> 前端开发
> Html/Css
HTML中如何使图片和文字在同一行水平和垂直居中
原创 lihf8515于2025年01月12日 16:01发表
来源:本站 阅读:367
HTML中如何使图片和文字在同一行水平和垂直居中？我们在网页的开发过程中经常会遇到这种情况，下面这种做法只是众多方法中的一种，笔者采纳了此种方法。
一、首先定义css文件内容如下：
.header{
width: 100%;
}
.headerinfo{
width:80%;
margin:0 auto;
}
.middle{
vertical-align:middle;
}
二、HTML页面中如下布局即可实现水平和垂直居中的效果。
<div class="header">
<div class="headerinfo">
<img src="images/logo.jpg" class="middle">
<span class="middle">这是一行文字</span>
</div>
</div>
阅读排行榜
皖公网安备34130202000765号