I am trying to center a image horizontally using css.
I am displaying my image on the screen with the following HTML code:
<div id="loading" class="loading-invisible"> <img class="loading" src="logo.png"></div>I am croping my image as I only want to display some of the image and I am using the following css:
img.loading {position:absolute;clip:rect(0px,681px,75px,180px);}however I can't work out how to center the image once it has been croped.
Anyone able to help ?
Best Answer
Try this for your CSS:
.center img { display:block;margin-left:auto;margin-right:auto;}and then add to your image to center it:
class="center"use position absolute and margin like this
img.loading{position: absolute;left: 50%;margin-left: -(half ot the image width)px}You can use different method:
Method 1:
Its a simple method, use "text-align: center;" for your parent div.
#loading {text-align: center;}<div id="loading" class="loading-invisible"> <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo"></div>FIDDLE
Method 2:
Please check the code:
#loading img {margin: 0 auto;display: block;float: none; /*width: 200px; if its a large image, it need a width for align center*/}<div id="loading" class="loading-invisible"> <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo"></div>FIDDLE
Method 3:
Using "display: flex;"
#loading {display: flex;align-items: center;justify-content: center;}<div id="loading" class="loading-invisible"> <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo"></div>FIDDLE
Method 4:
You can use "position: absolute;",
#loading {position: relative;}#loading img{position: absolute;top: 0;left: 50%;margin-right: -50%;transform: translate(-50%, 0%);-ms-transform: translate(-50%, 0%);-webkit-transform: translate(-50%, 0%);-moz-transform: translate(-50%, 0%);-o-transform: translate(-50%, 0%);}<div id="loading" class="loading-invisible"> <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo"></div>FIDDLE
Hope this will help you.
Use margin
margin-left:auto;margin-right:auto;Ways:
- Setting Left and Right Margin to “auto”
- Using display "Flex"
- Using the Text Align property
You can take a look on this blog for more descriptive answer
https://ecedev.com/post/How%20to%20center%20an%20image%20horizontally%20using%20HTML%20and%20CSS