How to center image on container header on service portal

[lrossy31]

Hello everyone,

I am trying to center an image for the header on my main page but the image stays to the left of the container.  I am setting the container to Fluid (changed setting in Page Designer) because I want to give a custom margin on the sides of the page.  This is what I have on my CSS:

img.resize {

width:80%;

height:55%;

position:absolute;

margin-top:-200px;

margin-bottom:-150px;

}

I have tried different options for position and still leaves the image to the left of the page.  I will greatly appreciate if anyone can provide any specific code to get these two things accomplished (center header image and give specific space on side of containers/page).

[Conner M · Accepted solution]

You can do this two ways, if you know how to use bootstrap then id try the first method. Otherwise the second method will work as long as your html is structured appropriately.

using bootstrap:

<img src="..." class="mx-auto d-block" alt="...">

without boostrap:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

[lrossy31]

Thanks a lot Conner!  I used the version without bootstrap and worked.  This helped me to get what I needed.  Really appreciate it.