HTML:

<img id="waves" src="img/waves.png">

CSS:

 #waves { float: left; margin: 0 auto; }

I need to move the image to the center of the page, but nothing happens. Help me please.

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

You got in the way of float: left;

But if you want to be in the center you can remove float:left; and add text-align: center; as shown below, but at the same time, this style will be assigned to the block that will contain your photo.

CSS

 #waves { margin: 0 auto; text-align: center; }

HTML

 <div id="waves"> <img src="img/waves.png"> </div>

    You do not need to wrap the image in a container at all, just add display:block : https://jsfiddle.net/ep3nmb56/

     #waves { display: block; margin: 0 auto; } 
     <img id="waves" src="http://www.familyfriendpoems.com/images/hero/nature-nature.jpg">