Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

How to align vertically this?

HI,

You got this site and if you look at thre three pictures down, how do you align the text in the center?

I have tried all techniques I could think of, and some from the internet, and it doesn't work. I'm sure I'm missing something, how can I allign this?

2 Answers

Tim Knight
Tim Knight
28,888 Points

Mr Bond,

Vertical centering is no easy task especially when it comes to float-based grid systems. It's possible using your floated grid system to do this, but you'd have to fundamentally change how your grid works in this instances you want this vertical centering to take place. I'll give you an example on how to make it work and then offer an alternative to using the float based grid altogether.

So using the grid system you have here you're going to have to break some of the functionality to get this working.

First, you'd need to set the position of your .l-grid class to relative. Then create a new class called .v-center or something like that. You'll put this on the grid col with your text in it. That'll contain:

.v-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

This will absolutely position that grid column in the vertical center. However it will now pull it out of the document position pulling the column on the right side over. So you'll then need to add a margin-left: 50% on the right half size column.

So like I said, not really an easy task for something you might feel should be very simple.

Alternatively you might instead want to investigate the CSS Flexbox Layout Course to see how Flexbox would make this vertical centering much easier for you, particularly the video on Vertical and Horizontal Centering.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Thank you! I will try that soon, and tell you how I went about it.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

What would the 'v' stand for? l = layout
m = modules
v for? : d

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I just used flexbox, who cares about the browser support xd

.v-align-wrap {
    display: flex;
}

.v-center {
    align-items: center;
    justify-content: center;
}

Though I update the site later, unless it's already updated if your curious.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

And this...

position: absolute;
  top: 50%;
  transform: translateY(-50%);

My site is getting messy I think.

Before applying for the job, I should re-factor the code as best as I can, right : d

Tim Knight
Tim Knight
28,888 Points

Bond,

I'm glad you decided to go the Flexbox route. I think the support might be a lot greater than you realize, see caniuse.com.

Now in terms of the class name choice, mine was random for you to rename as you saw fit, hence my "or something like that" at the end of the statement. If you're following a SMACSS naming convention this would be a utility class so something like .u-vertical-center would have been more appropriate.

Glad you got things working.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Thanks Tim! :)

Do you have any of your conferences online, or something, the way you do your website? The theory behind the beautiful architecture?

I saw your twitter where you were reading ATOM book, I'm sure you are a lot in the architecture part, as a front-end dev.

I'm trying to get it very clean as well.

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

:point_right: Crop your images.

The text does align with the tops of the images, but the images themselves are centered inside a mostly transparent circle. If you look closely, you can see a very light border around the circle. If you can't see it, try giving the images a colored background.

If you want the rectangular part of the image to align with the text, you can crop the images to eliminate the circle.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I want it to align vertically middle with those images, no matter their height. My bad asking the question.