Problem with center-block -Solved

Problem with center-block -Solved
0

#1

Hi,

I’m starting the first challenge, I have to make a tribute page and it’s already complicated for me ^^.
I’m using bootstrap 4 and have a problem centering my picturew. I’ve tried with center-block but it seems it’s not available anymore for bootsrap 4. I can do it with margin but may be is there a way more simple to do it? I tried to find the solution on other topics but nothing works.

<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<body>
  <div class="container-fluid">
  <h1 class="text-primary text-center">Chester Bennington's tribute</h1>
    <img class="center-block" src="http://images.complex.com/complex/images/c_limit,w_680/fl_lossy,pg_1,q_auto/aut0vbxi3hdp1kqsnowg/chester-bennington">
    <button class="btn btn-block">Like</button>
    </div>

Thanks for your help


#2

Hey. In Boostrap 4 the class center-block has been changed to a spacing class called “mx-auto”. Try using that one.

Just as info: the class “center-block” didn’t do much other than adding a “display:block” and “margin-left:auto; margin-right:auto” to the element.


#3

Thanks a lot for your answer noyb, it doesn’t work with “mx-auto”


#4

The class mx-auto works if the element is a block element or if it has a fixed width. You could try adding the class “d-block” your image as well.

But since your content is inside a container, you could just add the class “text-center” to the container-fluid wrapping it. So everything inside of it, will be centered.


#5

Thank you noyb that’s what I needed ! I understand my mistake, I didn’t declare it to a block element. Ok for the second solution but it implies to create a new container if I don’t want others element be centered.

You were very helpfull, a very big thanks for your help :slightly_smiling_face:


#6

I don’t know how to mark your answer as the topic’s solution


#7

I had no idea either, found the topic explaining it though. See here:


#8

You should mark this as solved! (just append " - SOLVED" to the title)


#9

Done :slight_smile: thanks a lot