css 图片 显示 文字居中显示

在网站设计中，美观和可读性是非常重要的，而在CSS中，图片的大小和位置以及文字的样式和排版是影响网站美观和可读性的重要因素。今天我们将讨论一下如何使用CSS来实现图片的显示和文字的居中显示的技巧。 首先，我们来看一下图片的显示。CSS中，我们可以使用下面的代码来设置图片的大小和位置，其中width和height表示图片的宽度和高度，margin表示图片距离周围元素的边距：

img {
  width: 100px;
  height: 100px;
  margin: 10px;
}

如果我们想要让图片居中显示，可以使用下面的代码：

img {
  display: block;
  margin: 0 auto;
}

其中，display: block;样式将图片转换为块级元素，使其可以居中显示，而margin: 0 auto;样式则将图片在水平方向上居中显示。 接下来，我们来看一下如何实现文字的居中显示。CSS中，我们可以使用text-align属性来设置文字的对齐方式，其中center表示居中对齐：

p {
  text-align: center;
}

如果我们想要将图片和文字都居中显示，可以将上面两个代码合并在一起：

img {
  display: block;
  margin: 0 auto;
}

p {
  text-align: center;
}

总之，图片和文字的样式和排版是影响网站美观和可读性的重要因素，我们可以使用CSS中的各种技巧来实现图片的大小和位置以及文字的居中显示。希望本文对您有所启发。