Tribute page - image not centering

Tribute page - image not centering
0

#1

Hello,

I can’t seem to get my image to center, have tried img-responsive, img-fluid, tried text-center, tried creating multiple divs, no divs…please help :confused:

 <br />
 <br />
<h1 style="font-family: Spectral, Serif" class="text-muted text-center display-1 font-weight-bold">Radiohead</h1>
   <h3 style="font-family: Spectral, Serif" class="text-muted text-center font-weight-bold">Fitter, happier, more productive</h3>
 <div class="row center-block">
<div class="text-center img-thumbnail">
<img class="img-fluid" src="http://epicentro.tv/wp-content/uploads/2017/02/epicentro.-1-756x425.jpg" alt="Radiohead" />
 <div class="caption text-center">test</div>
 </div>
 </div>

#2
<link href="https://fonts.googleapis.com/css?family=Spectral" rel="stylesheet" type="text/css">
<body class="bg-faded">
  <div class="container-fluid text-centered">
   <div class="bg-inverse">
     
       
     <br />
     <br />
    <h1 style="font-family: Spectral, Serif" class="text-muted text-center display-1 font-weight-bold">Radiohead</h1>
       <h3 style="font-family: Spectral, Serif" class="text-muted text-center font-weight-bold">Fitter, happier, more productive</h3>
     <div class="row center-block">
    <div class="text-center img-thumbnail container-fluid">
    <img class="img-fluid" src="http://epicentro.tv/wp-content/uploads/2017/02/epicentro.-1-756x425.jpg" alt="Radiohead" />
     <div class="caption text-center">test</div>
     </div>
     </div>
  </div>
  </div>
</body>

#3

AND CSS :slight_smile:

body {
margin-top: 60px;
}

img {
text-align:center;
}


#4

You can see that you need to put your content into container (in this case I added container-fluid) to have a proper document flow. Hope it hepls !


#5

@mirkoacimovic adding the container totally worked!! Thank you so much!! I really appreciate the tip :slight_smile: