Trying to center text vertically and horizontally next to an image-CodePudding

https://github.com/Yankysamurai/Personal-Website-P5

I am new to posting questions but I am trying to center my text "Welcome to my site" horizontally and vertically. I want it half the distance from the image and from the right margin. I tried display flex but it didn't work.

I just opened a git hub account so I hope you can see the code from the link.

Thank you.

CodePudding user response：

So, the flex container has an img and h2. In order to vertically center the text (relative to the image), you need to set align-items: center;

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

I would suggest using jsfiddle next time, because it makes it easier to review the problem. I created this one (using the GitHub repo you shared) with the fix: https://jsfiddle.net/13sc4m76/

Let me know if I misunderstood your question and I can take a second look.

CodePudding user response：

you can use the following ways to center elements in a block:

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

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