Tribute Page - putting it right

1

Hi!

I completed quite a lot of front end part but had a long break and I got back to finish my projects.

Here’s my tribute page: http://codepen.io/adamemnonS/pen/qrEVpY/
I did not spend too much on this as I’m learning back end at the same time.

Could you please give some advise about my project? I had one big issues which was: how to center the image within a div or without and here I failed miserably…

2

Read this guide on how to center images.

That’s a cool image on your tribute page. :smile:

1 Like
3

Maybe I got it wrong,but I thought I should use Bootstrap classes

4

It’s looking great.

You can check some stuff here https://www.w3schools.com/bootstrap/default.asp maybe it might be helpful for you.

Keep up the good work!

5

Normally if bootstrap doesn’t have a class to resolve your issue then you use custom css. Also, you can use custom css to modify a bootstrap class. Bootstrap class to center image is .center-block. If you look at the documentation you will notice that it’s the same css as the previous link I posted. Bootstrap tries to solve common css problems or patterns that developers use.

6

I already tried this class (center-block), but it did not work. Probably there is something wrong with the general template I’m using.

7

It’s the same after wrapping it in div:

  <div class="center-block">
   <figure class="figure ">
  <img src="https://www2.warwick.ac.uk/alumni/news/warwickconnect2014/discworld/discworld.jpg" class="figure-img img-fluid rounded " alt="Discworld">
  <figcaption class="figure-caption">A world on top of a giant turtle.</figcaption>
</figure> 
  </div>
8

hey, you can use center tags instead, check it here http://www.computerhope.com/issues/ch001613.htm

9

The problem is the figure class. It has a property

display: inline-block;

You can change the figure class to .text-center.

<figure class="text-center">
// your code
2 Likes
10

It worked, I knew it’s something small :slight_smile: