4 replies · 680 views
Header is a logo on the left and a company name next to it. I want them both vertically centered on the same line, right now the logo sits at the top and the text drops to the bottom. Made the row a flex but they still don't line up. What am I missing?
It's the cross-axis alignment. With the row set to flex, set align-items: center in the Layout panel, that vertically centers every item in the row against a shared midline regardless of their different heights, so the logo and the taller text line up. If you also want the pair grouped in the middle of the header instead of pushed left, that's justify-content: center on the same row.
+1, hit this exact thing. One gotcha if your text is two lines (name + tagline): wrap those two in their own block and center that, otherwise align-items centers each line separately against the logo and it looks slightly off. Nest a flex column for the text, then the outer row centers the whole text block against the logo.