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

【问题标题】：Trying to center text vertically and horizontally next to an image尝试在图像旁边垂直和水平居中文本
【发布时间】：2022-02-13 09:54:09
【问题描述】：

我刚开始发布问题，但我正在尝试将我的文本“欢迎来到我的网站”水平和垂直居中。我想要它与图像和右边距的距离的一半。我试过 display flex 但它不起作用。

我刚开了一个 git hub 账户，希望你能看到链接中的代码。

谢谢。

【问题讨论】：

【解决方案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/

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

【讨论】：

【解决方案2】：

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

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

或

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

【讨论】：