-1

I am trying to move image to center but the image moves slightly to right only (not to center). i have used many methods but all in vain.enter image description here

Code format is given below and it is a separate div.

<div style="width: 50%">
  <img class="center"src="resources/images/Brewery.png                
   id="functionImage" height="240" alt="#{loginweb.userFunction}"/>
</div>
Kamran Shakeel
  • 39
  • 8
  • Not sure what could be a problem. First thing you have to ensure is that the image itself doesn't have exceed white space on either side. Otherwise, placing the image in center results in slightly misaligned image. If the image is correctly created, check is property `object-position` that can be used in `` https://developer.mozilla.org/en-US/docs/Web/CSS/object-position. It helps positioning your image. – Kayasit R. Jan 04 '21 at 03:42

1 Answers1

1

Center an Image

.img-container-block {
  text-align: center;
}

.img-container-inline {
  text-align: center;
  display: block;
}
<!-- Block parent element -->
<div class="img-container-block">
  <img src="http://res.cloudinary.com/wfdns6x2g6/image/upload/v1509007989/user_psolwi.png" alt="John Doe">
</div>

<!-- Inline parent element -->
<span class="img-container-inline">
  <img src="http://res.cloudinary.com/wfdns6x2g6/image/upload/v1509007989/user_psolwi.png" alt="John Doe">
</span>
Momin
  • 3,200
  • 3
  • 30
  • 48