CSS操纵照片和文本在同1行显示信息且对齐的3种方

日期:2021-03-07 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

初学css的初学者盆友常常会遇到1个难题,当文本和照片出現在同1行或同1个div里边的情况下,在访问器中运作出来的显示信息实际效果常常是在不一样的行,那末大家如何才可以在css中操纵她们在同1行显示信息呢,实际上方式有3种:1、根据加上css的“vertical-align:middle;”;2、假如照片是情况照片,能够在css中设定情况照片,随后设定文本的padding特性;3、把文本和照片各自放入不一样的div中。上面3种方式都可以以让照片和文本在同1行显示信息,下面大家用案例来运用1下。

1、在css中给div加上上“vertical-align:middle”特性

大家用“申请注册、登录、找到登陆密码”这个在具体应用中常常遇到的状况还做案例,把“申请注册”和“登录”做成照片,“找到登陆密码”设定成文本其html编码以下:

拷贝编码
编码以下:

<div id="denglu">
<img src="reg.gif">
<img src="login.gif">
<a href="#">找到登陆密码</a>
</div>

css编码:

拷贝编码
编码以下:

#denglu *{
vertical-align:middle; /* 垂直居中对齐, */
font-size:14px;
}

在访问器中运作后的实际效果图以下:

 

应用css的“vertical-align:middle”特性让照片和文本在同1行对齐是1种十分常见的方式,期待大伙儿能够把握。

2、把照片设定为情况照片

假如大家的照片自身是1个情况照片的话,能够在css中应用“background”来设定该照片,随后设定文本的padding特性便可以使她们在同1行显示信息了,html编码以下:

拷贝编码
编码以下:

<div id="denglu">
<div id="zhaohuimima"><a href="#">找到登陆密码</a></div>
</div>

css编码:

拷贝编码
编码以下:

#denglu {
background:url(login.gif) no-repeat left center;
}
#zhaohuimima{
font-size:14px;
padding-left:50px;}

大家在css中设定了情况照片,随后又设定了文本的padding-left特性,这样,照片和文本就在同1行显示信息了,运作結果就不切图了,你能够自身试1下。

3、下面说下最终1种方式,各自把照片和文本放入不一样的div中,随后用“margin”特性开展精准定位,便可以使她们显示信息在同1行了,html编码以下:

拷贝编码
编码以下:

<div id="denglu">
<div id="zhuce"> <img src="reg.gif"/>
<div id="zhaohuimima"><a href="#">找到登陆密码</a></div>
</div>

css编码以下:

拷贝编码
编码以下:

#zhaohuimima{
font-size:14px;
margin-top:⑴6px;
padding-left:50px;}

在访问器中运作之后,你会发现,这个方式还可以让照片和文本在同1行显示信息,可是看起来仿佛不便了1点,因此本人還是较为强烈推荐第1种方式的。
上一篇:腾迅云半年度大促,低至三折特惠 返回下一篇:没有了