Help with Flex Box text centering [SOLVED]

1

Hello fellow campers!

I am currently learning about Flex Box and I ran into an odd situation. My goal is to center two text elements -an h1 and a p- inside the same div(box) with the h1 stacking on top of the p.

I gave the parent element the “display:flex” property and the child elements “margin:auto” but that made the text stack up side-by-side. I kept fiddling with it until I came up with the idea to nest the p element within the h1. This solved the problem (at least with it’s current bare bone styling).

My question is: is this okay? will I run into issues later on? Is this considered messy code or otherwise not-best-practice? I am going for a mastery of these concepts before I move forward so please share any insight you may have.

Take a look at my codepen below. In the “.skillsSection” I left the first box with a header of “Custom Responsive Websites” with the initial problem code (by not nesting the p inside the h1) to show you what I mean.

CodePen link:

2 
#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Working example

JSBin

2 Likes
3

aaaaaannnnnndddd that fixed it! I even learned about that earlier /facepalm.

Thank you so much @ArielLeslie! Your quick response times make me think you may in fact be a bot :stuck_out_tongue:

4

image

1 Like
5

LMAO! Well that answers that question :rofl: