Align image in center

Question

I'm trying to align my img in center, but not happens with this code:

<div id="foto" style="position:relative; left:50%;">
    <img src="Imgs/pa1.PNG" width="160" height="240" alt="foto1" />
</div>

Are you trying to center it within the body or within the div? — artjulian, Aug 29 '13 at 12:58
By aligning, you mean vertical and horizontal or only horizontal? — Nitesh, Aug 29 '13 at 12:59

score 3 · Answer 1 · answered Aug 29 '13 at 12:57

3

Use text-align:

<div id="foto" style="text-align: center;">
   <img src="Imgs/pa1.PNG" width="160" height="240" alt="foto1">
</div>

answered Aug 29 '13 at 12:57

Simon Staton

4,345
4
27
49

`

some text.
` not happens :S – Codificador iOS Aug 29 '13 at 13:02
Working for me: http://jsfiddle.net/NHXMy/ – Simon Staton Aug 29 '13 at 13:07
Maybe it IS centered but the container is no wider than the img. You can test this by setting the width of #foto to > 160 – Moob Aug 29 '13 at 13:07
Do you trying this ? http://jsfiddle.net/skwZy/2/ – Vikas Ghodke Aug 29 '13 at 13:08
If you want the text also aligning center then you must make sure it is inside the div with the text-align property – Simon Staton Aug 29 '13 at 13:08
Why did someone downvote this? – Simon Staton Aug 30 '13 at 11:07

score 2 · Answer 2 · answered Aug 29 '13 at 12:59

Dont use inline style. See this demo If you give outer div text-align:center; then all your text in your div will align in center. So its not a good practice.

<div id="foto">
    <img src="http://placehold.it/250x250" width="160" height="240" alt="foto1">
</div>

CSS

#foto {
    width: 100%;
}
#foto img {
    display: block;
    margin: 0 auto;
}

score 1 · Answer 3 · answered Aug 29 '13 at 12:59

1

Try below css.

img {
 display: block;
 margin: 0 auto;
}

or

#foto {
  text-align: center;
}

answered Aug 29 '13 at 12:59

Praveen

55,303
33
133
164

score 0 · Answer 4 · answered Aug 29 '13 at 12:58

0

CSS

#foto
{
    margin-left:auto;
    margin-right:auto;
    width:1000px;//give width accordingly 

}

HTML

<div id="foto" >
   <img src="Imgs/pa1.PNG" width="160" height="240" alt="foto1">
</div>

answered Aug 29 '13 at 12:58

Sasidharan

3,676
3
19
37

score 0 · Answer 5 · answered Aug 29 '13 at 12:58

With an image I feel you can simply apply the css rule "text-align: center;"

But if thats not working for you could try taking out the position rules and giving the "foto" div a width and an auto margin like so:

style="width:960px; margin: 0 auto;"

I am also not sure if you are aware of style sheets but seperating your CSS from your HTML is also good practice.

score 0 · Answer 6 · answered Aug 29 '13 at 13:00

0

Make CSS as

div {
  text-align: center;
}

Here is JSBin

answered Aug 29 '13 at 13:00

Naveen Kumar Alone

7,536
5
36
57

Align image in center

6 Answers6