Unable to center my image?

1

Capture.PNG1869×1005 65.8 KB

@import url("https://fonts.googleapis.com/css?family=Lato" rel="stylesheet");

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

.intro {
	height: 100%;
	width: 100%;
	margin: auto;
	background: url(https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/images/landing-screen.png);
	display: table;
	top: 0;
	background-size: cover;
}

.intro #inner {
	display: block;
	vertical-align: middle;
	width: 100%
}

.content {
	max-width: 100%;
	margin: 0 auto;
	padding-top: 50%;
}

/*---Media Queries---*/
@media screen and (max-width: 900px) {
	
}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 480px) {
	
}
2

Use this CSS to center an image or any div within the div.

for translate property refer this
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

.intro {
** height: 100%;**
** width: 100%;**
** background: url(https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/images/landing-screen.png);**
** display: block;**
** background-size: cover;**
** position: relative;**
}

**.intro #inner {**
**    position: absolute;**
**    left: 50%;**
**    top: 50%;**
**    transform: translate(-50%, -50%);**
**}**

Remove the “.content” class CSS properties it doesn’t required. I Hope this helps.

<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/3/1/3121452ad6636995a056f0c2342c155ac0c1dc39.jpg" width="690" height="334">
3

Or try the flexbox way

the section with the class .os-animation
display:flex; justify-content: center;

or just try adding text-align:center;

4

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

5

You can use bootstrap and add a second class new-class to your .img-responsive class. Then make the margin: 0 auto

.new-class .img-responsive {
margin: 0 auto;
}
6

Hi, where can I find the cleaned up code?

7

Hi Srimugan, Thank you for taking the time to send this over. The desk image is still not moving. It’s stuck on the top left corner. I tried the transform and still nothing.

8

I formatted the code snippet that you posted, to make it more readable. It’s necessary if you want to post HTML code.