“vertical-align:middle” 对display:inline-block有用
一般应用:图标 文字 一行显示,文字多的,图标和文字居中显示的
.s-li{width:100%;font-size:0px;}
.s-i{display:inline-block;
height:43px;//图片的高度
width:18%;
vertical-align: middle;
background:url(图片) center no-repeat;
}
s-div{
- display: inline-block;
vertical-align: middle;
width: 82%;
- font-size:1rem;
- }
<li class="s-li">
<i class="s-i"></i>
<div class="s-div">文字等</div>
</li>
1、在css中给div添加上“vertical-align:middle”属性
<div id="denglu">
<img src="reg.gif">
<img src="login.gif">
<a href="#">找回密码</a>
</div>
css代码:
#denglu *{
vertical-align:middle; /* 居中对齐, */
font-size:14px;
}
2、把图片设置为背景图片
如果我们的图片本身是一个背景图片的话,可以在css中使用“background”来设置该图片,然后设置文字的padding属性就可以使他们在同一行显示了,html代码如下:
<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;}
3、下面说下最后一种方法,分别把图片和文字放入不同的div中,然后用“margin”属性进行定位,就可以使他们显示在同一行了,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:-16px;
padding-left:50px;}
推荐第一种方法的。