Centering an image horizontally

Question

I've been trying to center an image horizontally, but everything I've tried hasn't been working. I need this image to be at the center of the div no matter the screen size, so it can appear centered on PC screens and phones as well ( it's for a project). If anybody can help me, I'd greatly appreciate it.

HTML code:

 <div class = "main">
    <img src = "kidme.jpg" alt ="Me!" >
 </div>

CSS code :

.main {
  background-color: #36454F;
  width:100%;
  height:345px;
}

img {
  height:326px;
  width:380px;
  position: absolute;
  margin-top: 20px;
}

I'm added an answer below it will works perfect,don't forget to tick it if useful:P — ADH - THE TECHIE GUY, Dec 28 '16 at 12:34

score 0 · Answer 1 · answered Dec 28 '16 at 12:29

0

This could works :

 .main {
  background-color: #36454F;
  width:100%;
  height:345px;
 }

img{
 height:326px;
 width:380px;
 display: block;
 margin:auto;
 margin-top: 20px;
}

answered Dec 28 '16 at 12:29

Teshtek

1,212
1
12
20

score 0 · Answer 2 · answered Dec 28 '16 at 12:33

0

Check this link

https://plnkr.co/edit/LsuxKAtvScM4znT1ROci?p=preview

                <div class = "main">
                <div class="imgwrap">
                <img src = "kidme.jpg" alt ="Me!" >
                </div>
            </div>

answered Dec 28 '16 at 12:33

Sharmila

785
4
11

Centering an image horizontally

2 Answers2