Trying to center an image inside a DIV

Im at a loss and cannot make this image center inside the main div. Can anyone please help :slight_smile:
Thanks!

  <div class="headertop">
  <div class="container-fluid">
    <div class="row" >
      <div class="siteheader" >
        <div class="head_img" ><img class="img-fluid" src="../images/design1.jpg" width="855px"> 
        </div>
      </div>
   </div>
  </div>
  </div>

CSS

.headertop {
background-color: #e9edf0;
width: 100%;
}

.siteheader {
padding-top: 10px;
height: auto;
text-align: center;

}

.head_img img{
width: 855px;
height: 244px;
margin: 0 auto;
vertical-align: middle;

}

Hi there henk3,

a brief glance at your HTML begs the question:
why do you need five div elements to contain
one img element? :wonky:

Here is a basic example…

https://codepen.io/coothead/full/mdJVwog

…and the code…

https://codepen.io/coothead/pen/mdJVwog

coothead

there are other elements inside divs below the image

Anyway thank you - I simplified the div fiasco and applied what you gave me and its working.

1 Like