Margin auto not working

In one of the starting tutorial of ResponsiveWebDesign Course, it was mentioned we can use margin: auto to center anything

But below code is working fine, but is NOT CENTERED

.i_am_image {

            width: 30px;

            margin: auto;

        }

       

        .i_am_image:hover {

            animation-name: width;

            animation-duration: 500ms;

        }

       

        @keyframes width {

            100% {

                width: 40px;

            }

        }

    </style>

</head>

<body>

   
    <!-- To change animation on hovering -->

    <img class="i_am_image" src="https://cdn.freecodecamp.org/curriculum/applied-visual-design/google-logo.png" alt="Google's Logo" />

Try to use display: block; property.

You must have a <style> opening tag too…

it is working now. but how?

To make the image behave like heading elements (which are block-level), you must create an img type selector that uses the value block for the display property, and use the applicable margin values to center it horizontally.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.