html图片与字体一起居中自适应

要让图片和字体一起居中自适应，可以使用CSS中的flex布局。具体步骤如下：

1. 在HTML中添加一个容器元素，例如div。

2. 将容器元素的样式设置为display:flex，使其采用flex布局。

3. 将容器元素的子元素（图片和文字）的样式设置为flex-grow:1，使它们平均占据容器元素的空间。

4. 使用text-align:center将文字居中显示。

5. 将图片的max-width设置为100%，使其自适应容器元素的宽度。

例如：

<div style="display:flex; align-items:center; justify-content:center;">
  <img src="image.jpg" style="max-width:100%; flex-grow:1;">
  <p style="text-align:center; flex-grow:1;">Some text here</p>
</div>

这样设置后，图片和文字会平均占据容器元素的空间，并且居中显示，而且图片会自适应容器元素的宽度。如果需要调整图片和文字的大小比例，可以使用flex-basis属性设置它们的基本大小。