How to make the element located in the center of a div?

Question

I got some images in a div:

<div>
    <img src="1.png">  </img>
    <img src="1.png">  </img>
</div>

And this in browsers is:

-----------------
|XX             |
-----------------

and I want to these images to be located in the center of the div, that is to say, like this:

-----------------
|      XX       |
-----------------

How to do that?

PS: Maybe this question is just very trivial, but I'm a newbie in CSS/HTML and I just can't overcome.

possible duplicate of [CSS - center image using text-align center?](http://stackoverflow.com/questions/7055393/css-center-image-using-text-align-center) — Chango, May 26 '13 at 07:50

score 3 · Answer 1 · answered May 26 '13 at 07:41

3

For images, a simple text-align: center would suffice.

http://jsfiddle.net/G57zL/1

answered May 26 '13 at 07:41

casraf

19,496
7
52
86

Jan.J · Accepted Answer · 2013-05-26T14:23:29.857

2

div {
    text-align: center;
}

Demo here: http://jsfiddle.net/Wc8kz/

And only one suggestion: img is self-closing tag and should be defined as <img src="..." /> or even <img src="..."> in HTML5. Code <img src="..."></img> is not valid.

edited May 26 '13 at 14:23

answered May 26 '13 at 07:41

Jan.J

2,990
1
22
32

score 2 · Answer 3 · answered May 26 '13 at 07:50

2

Right way to do it according to W3c

img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

Fiddle

answered May 26 '13 at 07:50

PSL

122,084
19
250
241

The Alpha · Answer 4 · 2013-05-26T07:49:52.383

1

Css

div.centered{
    text-align:center;
}

HTML

<div class="centered">
    <img src="1.png" />
    <img src="1.png" />
</div>

DEMO

edited May 26 '13 at 07:49

answered May 26 '13 at 07:43

The Alpha

138,380
26
281
300

How to make the element located in the center of a div?

4 Answers4