css怎么把图片居中显示文字

在CSS中，有多种方法可以将图片与文字居中显示。以下是一些常见的方法：

方法一：使用Flexbox布局

Flexbox是一个强大的布局模块，它可以轻松地实现元素的水平和垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>居中显示图片和文字</title>
<style>
  .container {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 100vh; /* 设置容器高度为视口高度 */
  }
  img {
    margin-right: 10px; /* 图片和文字之间的间距 */
  }
</style>
</head>
<body>
<div class="container">
  <img src="your-image-url.jpg" alt="示例图片" width="100" height="100">
  <p>这里是居中的文字</p>
</div>
</body>
</html>

方法二：使用Grid布局

CSS Grid布局也是一个现代的布局方案，它提供了二维布局的能力。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>居中显示图片和文字</title>
<style>
  .container {
    display: grid;
    place-items: center; /* 水平和垂直居中 */
    height: 100vh; /* 设置容器高度为视口高度 */
  }
  img {
    margin-right: 10px; /* 图片和文字之间的间距 */
  }
</style>
</head>
<body>
<div class="container">
  <img src="your-image-url.jpg" alt="示例图片" width="100" height="100">
  <p>这里是居中的文字</p>
</div>
</body>
</html>

方法三：使用绝对定位

通过绝对定位也可以实现元素的居中显示，但这种方法相对复杂一些。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>居中显示图片和文字</title>
<style>
  .container {
    position: relative;
    height: 100vh; /* 设置容器高度为视口高度 */
  }
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 实现居中 */
  }
  img {
    margin-right: 10px; /* 图片和文字之间的间距 */
  }
</style>
</head>
<body>
<div class="container">
  <div class="centered">
    <img src="your-image-url.jpg" alt="示例图片" width="100" height="100">
    <p>这里是居中的文字</p>
  </div>
</div>
</body>
</html>