在CSS中居中图像

Question

在下面，我想以图片和报价为中心。虽然我已经设法这样做，但他们在中心的位置略有不同。我怎样才能使它们准确地位于中心并准确地引用图像？ 提前谢谢。

Here is my problem

HTML：

<p id="quote">It is not who I am underneath, but what I do that defines me</p>

<img src="http://comiconverse.com/wp-content/uploads/2016/10/The-Dark-Knight.jpg">

CSS：

img {
max-width: 40%;
max-height: 40%;
width: auto;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
float: left; }

#quote {
text-align: center; }