Portfolio Page - Text and 3-image row not aligning

Hi, I have a question. I’m working on my portfolio page and I’m not getting my images and text centered correctly.

Here is a link to my page (just started on it so it’s bare bones):

The area I’m having trouble with is the portfolio section. Here is the code for that:

  <div class="container">
      <h2 class="text-center">Portfolio</h2>
      <div class="row">
        <div class="col-md-4"><img id="portfolio-image" src="http://www.rectangleworld.com/demos/Cellular01/screencap.jpg" title="Project 1" ></div>
        <div class="col-md-4"><img id="portfolio-image" src="http://www.rectangleworld.com/demos/Cellular01/screencap.jpg" title="Project 2" ></div>
        <div class="col-md-4"><img id="portfolio-image" src="http://www.rectangleworld.com/demos/Cellular01/screencap.jpg" title="Project 3" ></div>
      </div>
    </div>

The “portfolio-image” class just resizes those images to be a bit smaller.

So I have the row of images centered, and the heading “Portfolio” centered, but they don’t appear to be centered in relation to each other. “Portfolio” is skewed to the right of the middle photo and I’d like it to be centered.

Can anyone help put me in the right direction? :slight_smile:

that’s because of
#portfolio-image { height: 90%; width: 90%; }
Your portfolio is centered right but your images are 90% width and because of that 10% lacking on image width it doesn’t seem to be centered. Just set your width and height to 100% and u will understand it better.

2 Likes

Yes exactly what freakout said. When you set it to 90% the image only takes up 90% of the div that it is inside. So by switching it to 100% there wont be that extra space and it will align nicely.

1 Like

Thank you, that did the trick! :smile:

If you had wanted another solution, you would be able to make another class and add the below attributes to it:

.center-text
{
text-align:center;
position: relative;
left: -20px;
}

From here you can adjust the offset from the left by pixel until you get it where you want it. Just another way to “skin the cat”!

1 Like

Thanks, also helpful! I plan to finish this baby up ASAP and come back to it when I know more.

@abigailb, You should change the id=“portfolio-image” into a class instead. There shouldn’t be any duplicate IDs on a page, some say within an entire website or application. Also, if you want to resize an image, the way I do it is like this:


.portfolio-image{
   width: 90%;
   height: auto;
}

This scales the image for different size screens and keeps the original aspect ratio.

1 Like