Center an image horizontally using CSS
HtmlCssHtml Problem Overview
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 ?
Html Solutions
Solution 1 - Html
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"
Solution 2 - Html
use position absolute and margin like this
img.loading{
position: absolute;
left: 50%;
margin-left: -(half ot the image width)px
}
Solution 3 - Html
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>
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>
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>
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>
Hope this will help you.
Solution 4 - Html
Use margin
margin-left:auto;
margin-right:auto;