Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Garrett Reid
seal-mask
.a{fill-rule:evenodd;}techdegree
Garrett Reid
Front End Web Development Techdegree Student 16,040 Points

center span element vertically Inside div?

Hello everyone! I've got a problem with a layout. I have an image floated to the right, and i want to put a span element on the left. However, I can't seem to get the span element to center right where i want it to. I can't for the life of me figure it out. The code is located below, and thank you so much for helping!

      <header id="TOP" class="main-header clear">
        <div class="main-nav clear">
        <h1>Garrett Reid</h1>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div> <!-- main-nav -->
        <div class="title-wrapper clear">
          <div class="profile-img-wrapper">
            <img id="profile-img" src="img/my_profile_img.png" alt="Profile Image">
          </div>
          <div class="head-paragraph">
            <span>Hi! I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse am excited to put all my skills to use!</span>
          </div>
        </div>
    </header>

  .title-wrapper {
    max-width: 100%;
  }

  .head-paragraph,
  .profile-img-wrapper {
    width: 50%;
  }

  .profile-img-wrapper {
    float: right;
  }

  .head-paragraph {
    width: 40%;
    height: 342px;
    text-align: left;
    padding-top: 100px;
    padding-left: 200px;
  }

1 Answer

Steven Parker
Steven Parker
215,939 Points

Here's a cute way to center something vertically. Place the top halfway down the container, then raise it up half of it's own height. I did that to your sample by wrapping the span in a div with the class "middle", and adding the CSS for "middle" as shown below. I also removed the top padding from "head-paragraph" so it would not interfere.

    <!-- stuff above here omitted for this example -->
    <div class="head-paragraph">
      <div class="middle">
        <span>Hi! I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse am excited to put all my skills to use!</span>
      </div>
    </div>
    <!-- stuff below here omitted for this example -->
/* other stuff above here omitted for this example */
  .head-paragraph {
    width: 40%;
    height: 342px;
    text-align: left;
    padding-left: 200px;
  }

  .middle {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

This would probably have been a good question for the CSS topic area.