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

新手学习CSS时常常会遇到一个问题：如何让图片和文字在同一行或同一个div内展示并达到理想的显示效果？这是一个常见且重要的需求，掌握它可以为网页设计带来无限可能。以下是三种常用的方法，通过实例来详细。

方法一：使用CSS的“vertical-align:middle;”属性

对于这种情况，我们可以采用“注册、登陆、找回密码”的实例来演示。将“注册”和“登陆”做成图片，而“找回密码”则是文字。HTML代码如下：

```html

```

对应的CSS代码为：

```css

denglu {

vertical-align:middle; / 居中对齐 /

font-size:14px;

}

```

使用这种方法，图片和文字会在同一行中对齐，这是一种非常常见且实用的方法。

方法二：将图片设置为背景图片

如果图片是作为背景使用的，可以在CSS中设置背景图片，然后调整文字的`padding`属性以达到在同一行显示的效果。HTML代码示例为：

```html

```

对应的CSS代码：

```css

denglu {

background:url(login.gif) no-repeat left center;

}

zhaohuimima{

font-size:14px;

padding-left:50px;

}

```

通过设置背景图片并调整文字的`padding-left`属性，图片和文字就能在同一行显示。

方法三：分别将图片和文字放入不同的div中

使用`margin`属性进行定位，也可以使他们在同一行显示。HTML代码示例为：

```html

```

对应的CSS代码：

```css

zhaohuimima{

font-size:14px;

margin-top:-16px;

padding-left:50px;

}

```

虽然这种方法也可以实现目标，但从实际操作和视觉效果来看，可能不如前两种方法直观和简便。个人更推荐第一种方法。希望这些方法能帮助新手朋友们更好地掌握CSS，让网页布局更加丰富多彩。