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
</div>
</div>
any idea why it doesn’t work ?
Thanks
(and apologies for my English, i’m French)
GSpires
February 27, 2017, 2:12pm
2
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
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
bwnmwm.markdown
BWNmWM
------
A [Pen](https://codepen.io/Clementh29/pen/BWNmWM) by [Clement](http://codepen.io/Clementh29) on [CodePen](http://codepen.io/).
[License](https://codepen.io/Clementh29/pen/BWNmWM/license).
index.html
<div class="container">
<div class="jumbotron">
<h1 class="text-center">Elon Reeve Musk</h1>
<h2 class="text-center">The achiever</h2>
<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>This guy might change our world even more</figcaption>
</figure>
</div>
</div>
This file has been truncated. show original
style.css
body {
margin-top: 60px;
}
There are more than three files. show original
<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!
this it it! you solved my problem.
Thanks a lot
1 Like
FedeD
October 1, 2017, 2:54pm
9
Hallo , then what should we do if we want to center the text?