在一个div中，有一张图片和一段文字如何让它们居中并且上下对齐

可以使用CSS的flex布局来实现这个效果。首先，将包含图片和文字的div设置为display: flex，并且设置flex-direction: column，使它们垂直排列。然后，使用justify-content: center和align-items: center来将它们水平和垂直居中。最后，使用align-self: center来使图片和文字在垂直方向上对齐。

示例代码如下：

HTML:

<div class="container">
  <img src="image.jpg" alt="image">
  <p>Some text here</p>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  align-self: center;
}

相关问题

在一个div中存放一张图片和一段文字，如何让它们向左对齐，并且有10px上下左右边距。

可以使用CSS来实现这个效果，具体代码如下：

div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 10px;
}

img {
  margin-right: 10px;
}

解释一下，首先将div设置为flex布局，这样可以让图片和文字在同一行并且垂直居中。然后使用align-items和justify-content属性分别设置垂直和水平方向的对齐方式，这里设置为左对齐。最后设置margin属性为10px即可实现上下左右边距。图片的右边距也设置为10px，这样可以让图片和文字之间有一定的间隔。

怎么用css样式做出一张图片，一段文字和两个按钮在一个黑色边的盒子里居中对齐

您可以使用以下代码实现您的需求：

<div style="border: 1px solid black; padding: 20px; text-align: center;">
    <img src="image.jpg" alt="Image">
    <p>这里是一段文字。</p>
    <button>按钮1</button>
    <button>按钮2</button>
</div>

其中，`border` 属性可以实现黑色边框，`padding` 属性可以设置内边距，`text-align` 属性可以实现文本居中对齐。您可以自行修改代码中的图片链接、文字内容和按钮内容。