尝试将文本在图像旁边垂直和水平居中

Question

我不熟悉发布问题，但我试图将我的文本“欢迎来到我的网站”水平和垂直居中。我希望它距离图像和右边距一半的距离。我试过 display flex 但没用。

我刚开了一个 git 中心帐户，所以我希望你能看到来自 link 的代码。

谢谢。

Answer 1

因此，flex 容器有一个 img 和 h2。为了使文本垂直居中（相对于图像），您需要设置 align-items: center;

.about_img_h2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

我建议下次使用 jsfiddle，因为这样可以更轻松地查看问题。我创建了这个（使用您共享的 GitHub 存储库）修复： https://jsfiddle.net/13sc4m76/

如果我误解了你的问题，请告诉我，我可以再看看。

Answer 2

您可以使用以下方式使块中的元素居中：

display: flex;
flex-direction: row;
justify-content: center

或

display: flex;
flex-direction: column;
align-items: center

Trying to center text vertically and horizontally next to an image