Centering image in CSS

Asked May 24 '17 at 13:37

Active May 24 '17 at 13:37

Viewed 65 times

In the following, I want to center image and quote. Although I have managed to do so, their position in the center is slightly different. How can I make them be precisely in the center and image exactly under quote? Thanks in advance.

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; }

asked May 24 '17 at 13:37

Erol Aliyev

I have already tried this solution but unfortunately, it doesn't work in my case – Erol Aliyev May 24 '17 at 13:42
https://codepen.io/anon/pen/MmLLLX - if you want to move the navs down, just add top margin to them. I have added wrapper so that you get a distinct left, center and right column – Pete May 24 '17 at 13:53
1

https://codepen.io/anon/pen/VbggJL - if you want 25%/50%/25% page layout around your image – gaynorvader May 24 '17 at 13:59
add display: block; margin: 0 auto; in your css – G.Ashok Kumar May 24 '17 at 14:10
`margin-left: somenumberofpx;` – NathanielSantley May 24 '17 at 14:11
@gaynorvader thank you! that was exactly what I wanted to do. – Erol Aliyev May 24 '17 at 18:54

Centering image in CSS

0 Answers0