html⽂字图⽚同⼀⾏,CSS控制图⽚和⽂字在同⼀⾏显⽰且对齐
的3种⽅法
初学css的新⼿朋友经常会遇到⼀个问题，当⽂字和图⽚出现在同⼀⾏或者同⼀个div⾥⾯的时候，在浏览器中运⾏出来的显⽰效果往往是在不同的⾏，那么我们怎么才能在css中控制他们在同⼀⾏显⽰呢，其实⽅法有3种：1、通过添加css的“vertical-align:middle;”；2、如果图⽚是背景图⽚，可以在css中设置背景图⽚，然后设置⽂字的padding属性；3、把⽂字和图⽚分别放⼊不同的div中。上⾯三种⽅法都可以让图⽚和⽂字在同⼀⾏显⽰，下⾯我们⽤实例来应⽤⼀下。
1、在css中给div添加上“vertical-align:middle”属性
我们⽤“注册、登陆、回密码”这个在实际运⽤中经常遇到的情况还做实例，把“注册”和“登陆”做成图⽚，“回密码”设置成⽂字其html代码如下：
#denglu *{
vertical-align:middle; /* 居中对齐， */
font-size:14px;html图片展示特效
}
使⽤css的“vertical-align:middle”属性让图⽚和⽂字在同⼀⾏对齐是⼀种⾮常常⽤的⽅法，希望⼤家可以掌握。
2、把图⽚设置为背景图⽚
如果我们的图⽚本⾝是⼀个背景图⽚的话，可以在css中使⽤“background”来设置该图⽚，然后设置⽂字的padding属性就可以使他们在同⼀⾏显⽰了，html代码如下：
#denglu {
background:url(login.gif) no-repeat left center;
}
#zhaohuimima{
font-size:14px;
padding-left:50px;}
我们在css中设置了背景图⽚，然后⼜设置了⽂字的padding-left属性，这样，图⽚和⽂字就在同⼀⾏显⽰了，运⾏结果就不切图了，你可以⾃⼰试⼀下。
3、下⾯说下最后⼀种⽅法，分别把图⽚和⽂字放⼊不同的div中，然后⽤“margin”属性进⾏定位，就可以使他们显⽰在同⼀⾏了，html 代码如下：
代码如下:
css代码如下：
#denglu {
background:url(login.gif) no-repeat left center;
}
#zhaohuimima{
font-size:14px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。