如何让一个div竖着分为两个部分，上面放图片，下面放文字，并且图片和文字部分宽度相等

你可以使用flex布局来实现这个效果。具体步骤如下：

1. 给父元素设置 `display: flex; flex-direction: column;`，将其变成纵向的flex容器。

2. 给父元素设置 `height`，以确定整个容器的高度。

3. 给放图片的子元素设置 `flex: 1;`，使其占据剩余的空间。

4. 给放图片的子元素设置 `display: flex; justify-content: center; align-items: center;`，使图片在子元素的中央显示。

5. 给放文字的子元素设置与放图片的子元素相同的样式。

6. 给父元素设置 `overflow: hidden;`，以防止文字超出容器。

示例代码如下：

<div style="display: flex; flex-direction: column; height: 200px; overflow: hidden;">
  <div style="flex: 1; display: flex; justify-content: center; align-items: center;">
    <img src="your-image-url" style="max-width: 100%; max-height: 100%;">
  </div>
  <div style="flex: 1; display: flex; justify-content: center; align-items: center;">
    <p>Your text here</p>
  </div>
</div>

注意：为了让图片和文字部分宽度相等，你可以给 `img` 和 `p` 设置相同的 `max-width`，或者将它们都放到一个相同宽度的容器里。