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

Garrett Reid
seal-mask
.a{fill-rule:evenodd;}techdegree
Garrett Reid
Front End Web Development Techdegree Student 17,532 Points
Posted by Garrett Reid
.a{fill-rule:evenodd;}techdegree
Garrett Reid
Front End Web Development Techdegree Student 17,532 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
229,732 Points
Steven Parker
Steven Parker
229,732 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.