CSS 文字和图片对齐|极客教程

CSS 文字和图片对齐

在网页设计中，文字和图片的排版是非常重要的，好的排版可以使页面看起来更加美观和易读。在这篇文章中，我们将重点讨论如何使用CSS来实现文字和图片的对齐。

常见情况下的文字和图片对齐

在网页设计中，文字和图片可以出现在不同的排版方式中，最常见的有以下几种情况：

文字环绕图片：文字围绕在图片的周围，形成一个整体。
图片在文字下方：文字位于图片的上方或下方。
图片在文字上方：文字位于图片的上方或下方。

接下来，我们将分别介绍这三种情况下如何使用CSS来实现文字和图片的对齐。

文字环绕图片

文字环绕图片是一种比较常见的排版方式，它可以使页面看起来更加生动和有趣。在这种情况下，文字会围绕在图片的周围，我们可以利用CSS的float属性来实现。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Wrapping around an Image</title>
<style>
img {
  float: left;
  margin: 0 20px 20px 0;
}

p {
  text-align: justify;
}
</style>
</head>
<body>

<img src="image.jpg" alt="Image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc sed libero accumsan ornare sed sit amet odio. Integer nec eros ut felis sollicitudin vehicula. Etiam id ex nec nulla porttitor lacinia. Donec quis pulvinar elit. Fusce non nunc augue. Nulla in nisl elit. Proin et varius augue. Mauris non dolor tortor. Vivamus tincidunt ac magna a sollicitudin.</p>

</body>
</html>

在这个示例中，我们首先将图片设置为float: left;，这样文字就会围绕在图片的右侧。此外，我们还给图片设置了一些margin值，以便文字和图片之间有一些间隔。最后，我们给文字设置了text-align: justify;，使得文字能够自动对齐，看起来更加整齐。

图片在文字下方

当图片位于文字的下方时，我们可以简单地使用display: block;属性来实现。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Below Text</title>
<style>
img {
  display: block;
  margin: 0 auto;
}

p {
  text-align: center;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc sed libero accumsan ornare sed sit amet odio. Integer nec eros ut felis sollicitudin vehicula. Etiam id ex nec nulla porttitor lacinia. Donec quis pulvinar elit. Fusce non nunc augue. Nulla in nisl elit. Proin et varius augue. Mauris non dolor tortor. Vivamus tincidunt ac magna a sollicitudin.</p>
<img src="image.jpg" alt="Image">

</body>
</html>

在这个示例中，我们给图片设置了display: block;，这样图片会显示在文字的下方。同时，我们将图片的margin设置为0 auto;，使得图片在水平方向上居中显示。最后，我们给文字设置了text-align: center;，使得文字也能够水平居中。

图片在文字上方

当图片位于文字的上方时，我们同样可以使用display: block;属性来实现。下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Above Text</title>
<style>
img {
  display: block;
  margin: 0 auto 20px;
}

p {
  text-align: center;
}
</style>
</head>
<body>

<img src="image.jpg" alt="Image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nunc sed libero accumsan ornare sed sit amet odio. Integer nec eros ut felis sollicitudin vehicula. Etiam id ex nec nulla porttitor lacinia. Donec quis pulvinar elit. Fusce non nunc augue. Nulla in nisl elit. Proin et varius augue. Mauris non dolor tortor. Vivamus tincidunt ac magna a sollicitudin.</p>

</body>
</html>

在这个示例中，我们同样给图片设置了display: block;，使得图片显示在文字的上方。同时，我们将图片的margin设置为0 auto 20px;，在水平方向上居中显示，同时在下方留出一些间隔。最后，我们给文字设置了text-align: center;，使得文字也能够水平居中。