首页
> 计算机技术
> 前端开发
> Html/Css
HTML中如何使图片和文字在同一行水平和垂直居中
原创 lihf8515 2025年01月12日 16:01
来源:本站 阅读:898
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>
作者
昵称：君子如兰
注册时间：2025-01-31 02:47:34
最近更新：2026-01-24 17:01:06
文章总数：94篇
原创 88篇
转载 6篇
相关文章
阅读排行榜
皖公网安备34130202000765号