Help with centering an image?

1

I can’t seem to center my image, or round my corners with bootstrap. I’m I using the class correctly? Should I have a better CSS page?

<link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Tangerine">
<div class="containter">
  <h1 class="text-center">Tom Beckerle: Portfolio Page</h1>
  <a href="https://www.flickr.com/photos/152142166@N05/">
    <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/4/7/47656578d60b04ed46a8351dac0f1d5d393987f5.jpg' class="center-block img-rounded"/>
  </a>
  <h2>Body of Work</h2>
  <p>Outside of Wordpress, I don't have a lot of actual coding experience. I did manage to learn quite a bit installing and tweaking themes, but understanding the full aspects and challenges of the web are my goals.</p>
  
</div>
-->
2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

1 Like
3

Your code appears to work fine with Bootstrap v3. In Bootstrap v4 things are a bit different.

You need to use rounded instead of img-rounded and you need to set the display to block and provide a width along with setting the class to mx-auto.

Here is a working version of your code.

<div class="containter">
  <h1 class="text-center">Tom Beckerle: Portfolio Page</h1>
  <a href="https://www.flickr.com/photos/152142166@N05/">
    <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/4/7/47656578d60b04ed46a8351dac0f1d5d393987f5.jpg' style="width: 453px; display:block;" class="mx-auto rounded"/> 
  </a>
  <h2>Body of Work</h2>
  <p>Outside of Wordpress, I don't have a lot of actual coding experience. I did manage to learn quite a bit installing and tweaking themes, but understanding the full aspects and challenges of the web are my goals.</p>

For more info see the following links.

http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
https://v4-alpha.getbootstrap.com/migration/

2 Likes
4

Extremely helpful. Thanks, guys. I’ll be mindful of that from now on.

1 Like
5

So…here I am again!!! UPDATED

I searched boxes and cards high, and low…So, I tried to create, and shadow my own box. The goal is to be able to place elements in the places you want, right? I have a fundamental understanding for “col-*-2,4,3,” etc. I guess I’m just trying to figure it all out. I want to get my page layout down, and then I can add buttons, pictures, etc. The layout is where I’m struggling.

Padding, margin, I understand all of that. I guess I’m just trying to figure out what works best without littering my code with 8 million unnecessary divs.

<div class="containter">
  <h1 class="text-center">Tom Beckerle: Portfolio Page</h1>
  <a href="https://www.flickr.com/photos/152142166@N05/">
    <img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/4/7/47656578d60b04ed46a8351dac0f1d5d393987f5.jpg' style="width: px; display:block;" class="mx-auto rounded"/> 
  </a>
  <div class="mx-auto">
  <div style="width: 75%">
  <div class="card">
  <div class="card-block">
    <div class="z-depth-1">
  <h2>Body of Work</h2>
  <p>Outside of Wordpress, I don't have a lot of actual coding experience. I did manage to learn quite a bit installing and tweaking themes, but understanding the full aspects and challenges of the web are my goals.</p>
    </div>
  </div>
  </div>
  </div>
  </div>
6

lol, its not that complicated :smile:

<div class="mx-auto card card-block z-depth-1" style="width: 75%">
  <h2>Body of Work</h2>
  <p>Outside of Wordpress...</p>
</div>