Text-center class doesn't work

Hello there

I’m struggling with the first project where i have to create my tribute page.

I’m just starting and i’m already stucked with the position of my header, sub-head and picture

All I get is that the text and the picture are centered one with each other, but they stay on the left of the page.

what i want is everything centered with each other and in the middle of the page

Here’s my code (note that i don’t use CSS)

div class=“container”>
div class=“jumbotron”>
div class=“row”>
div class=“col-xs-12”>
h1 class=“text-center”>Elon Reeve Musk
h2 class=“text-center”>The achiever
img class=“rounded-corner text-center” src=’//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/e/6/e66fc12a72b81fa3ef409943d61626f2fb18bb33.jpg’ alt=“Elon Reeve Musk”/>

Elon Reeve Musk

The achiever

Elon Reeve Musk
  </div>
</div>

any idea why it doesn’t work ?

Thanks

(and apologies for my English, i’m French)

Hi There, are you closing the divs? such as <h1></h1>

hello

Yes i do, it doesn’t show in the code because otherwise it would show the result of the code instead of the code itself.

I managed somehow to fix my problem by removing the class=“row” and the class=“col-xs-12” and by putting the picture in a figure element, but i don’t understand why it didn’t work before.

So here’s my code now (if you see things to improve, feel free to tell them :slight_smile:

div class=“container”>
div class=“jumbotron”>
h1 class=“text-center”>Elon Reeve Musk
h2 class=“text-center”>The achiever
figure class=“text-center”>
img class=“img-thumbnail” src=“https://media1.britannica.com/eb-media/88/154388-004-F01361C0.jpg” alt=“Elon Reeve Musk”/>
figcaption>texte essai
/figure>
/div>
/div>

1 Like

can you post the codepen link here?

there you go, but it’s with the new code

<div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-xs-12">
        <h1 class="text-center">Elon Reeve Musk</h1>
        <h2 class="text-center">The achiever</h2>
        <img class="rounded-corner text-center" src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/e/6/e66fc12a72b81fa3ef409943d61626f2fb18bb33.jpg' alt="Elon Reeve Musk" />
      </div>
    </div>
  </div>
</div>

The above code works fine - everything is centered.
Make sure to include bootstrap where ever you are coding the page.

Have fun!

Maybe this helps: https://forum.freecodecamp.com/t/codepen-changed-the-default-bootstrap-version/

2 Likes

this it it! you solved my problem.

Thanks a lot :slight_smile:

1 Like

Hallo , then what should we do if we want to center the text?