CSS控制图片和文字在同一行显示且对齐的方法

html代码:

<div class="win_act">
    <div class="win_act_left">
        <p class="title_ready">活动即将开始</p>
    </div>
    <div class="win_act_right">
        <img src="./images/active_start.png" alt="">
    </div>

</div>

css:

.win_act_left{
    display: inline-block;
    width: 695px;
    border: 4px solid rgba(255,255,255,1) ;
    border-radius: 20px;
    font-size: 50px;
    color: rgba(255,255,255,.5);
    text-align: center;
    padding: 50px 0;
    text-indent: 2px;

}

.win_act_right{
    display: inline-block;
    vertical-align: middle;
}

.win_act_right img{
    display: inline-block;
    width: 200px;
    height: 200px;
    padding-left: 30px;
    vertical-align: middle;
    margin-top: -25px;  //调整图片大小
}

//原始效果

修改后:

别人的方法：

css代码： 

复制代码

代码如下:

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

2、把图片设置为背景图片

如果我们的图片本身是一个背景图片的话，可以在css中使用“background”来设置该图片，然后设置文字的padding属性就可以使他们在同一行显示了，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属性，这样，图片和文字就在同一行显示了，运行结果就不切图了，你可以自己试一下。

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;}