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 Samir Rezai
Samir Rezai
444 Points

How to align labels, text and .NET controls from CSS inside a DIV?

What I'm trying to accomplish is to align texts and different controls within the CSS class.

For example, I have a class

.int { width: 100%; height: 80px; background-image: url('/Images/radial-gradient.png'); }

I have 3 of those classes with different background and height. I also have a content which is smaller in width and it's centered in the screen.

.content { width: 50%; margin-left:25%; height:300px; border: 1px solid black; opacity: 0.6; filter: alpha(opacity=60); }

What I want to be able to do is to add some text and some images inside .int and other class so that the text and controls falls within the .content width.

Here's the image of what I'm trying to accomplish. (http://s8.postimg.org/xfbowu0zp/sketch.png) Note* I'm doing this in asp.net c#. The word label in the image is just a standard label control.

3 Answers

Andrew Shook
Andrew Shook
31,709 Points 
.int > *{
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

This will line up all of .int's direct children left to right( assuming there is space), and vertically align the center of their content.

Samir Rezai
Samir Rezai
444 Points
Samir Rezai
Samir Rezai
444 Points

Andrew,

Thank you for your reply. When I added the following code, the text start all the way at the left of the page...

Andrew Shook
Andrew Shook
31,709 Points

Yes, you will need to go in a set the desired widths of all of the direct descendants of the .int class. For example, the css for the header section of your sketch might look like this:

#logo{
  width: 25%;
  margin-right:45%;
}
#circle-image{
  width: 15%;
  margin-right: 4%;
  border-radius: 50%;
}
#label-container{
  width: 10%;
}
Samir Rezai
Samir Rezai
444 Points
Samir Rezai
Samir Rezai
444 Points

Thank you Andrew. I'm getting a hang of CSS. I'm still struggling with the second .div. Can you point me to the right direction on how to align two labels horizontallay and have a space in between them?

Andrew Shook
Andrew Shook
31,709 Points

Samir, if possible, try putting your code in CodePen. Once you put it on code pen patse the link here and I can look at you code an interact with it. CodePen will make it much easier for me to help you.