Center image using text-align center?

Question

Is the property text-align: center; a good way to center an image using CSS?

img {
    text-align: center;
}

https://jsfiddle.net/j6q4d810/1/ This works fine with any width and height — gmarsi, Mar 27 '19 at 17:06

score 1165 · Accepted Answer · edited Sep 12 '19 at 21:44

1165

That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element. See the W3C specification.

Use this instead:

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

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

edited Sep 12 '19 at 21:44

Peter Mortensen

30,030
21
100
124

answered Aug 14 '11 at 06:25

Mrchief

73,270
19
138
185

7

i tried this method and it works! but when I tried 2 images, it didn't work, it just stack on top of each other like a totem, any ideas how to align 2 images on the same line in the middle? – PatrickGamboa Feb 28 '13 at 04:20
the css display block basically puts all img.center on separate lines. you have to hack around the code to get your desired effect. set width:350px; or what your 2 image width is. make both images into one actual jpeg etc – Jon Mar 05 '13 at 12:59
This method is useful when we want to center a logo for a page. – Krishnadas PC Aug 13 '14 at 12:03
1

How is it not supported by the W3C? Can you provide with links to back that claim? – Madara's Ghost Apr 07 '15 at 14:44
1

@SecondRikudo:`text-align` is for centering text, as the name implies. For block elements, `margin: 0 auto;` is the [recommended](http://www.w3.org/Style/Examples/007/center.en.html) approach. – Mrchief Apr 07 '15 at 14:48
4

@Mrchief Images are inline elements, not blocks. `text-align` works just as well on them. – Madara's Ghost Apr 07 '15 at 14:50
1

@Mrchief that approach is great when you want to treat images as blocks and center them as such. But not when it's in the normal flow as part of the text (and even with the lack of said text). Also, there's quite the difference between "That's how the W3C do it in their article" and "They don't support it". – Madara's Ghost Apr 07 '15 at 14:52
The first sentence doesn't really make sense. The W3C don't "support" (or not) technical features. Either something works or doesn't according to how a specification defines it. In this case, the CSS in the question doesn't work simply because `text-align` applies to block containers, not directly to inlines. The "text" in the property name has nothing to do with text vs images - it affects any inline-level box within the block container, and as @Second Rikudo has mentioned, images are inline-level by default. – BoltClock Apr 07 '15 at 15:01
1

Perhaps we're reading too much into the opening sentence. @BoltClock since this answer gets so much traffic, I'm all for improving it, so feel free to suggest something that makes sense. Personally, I think lot of what W3C says and how it works in browsers doesn't make sense but then, I digress... – Mrchief Apr 07 '15 at 15:15
6

That explanation is kind of weird isn't it? You say 'text-align' applies to blocks and not inlines, which I believe, then you literally change it to a block element yet avoid using text-align. I mean your code works, but that paragraph needs to be completely reworded, imo. – Octopus Aug 18 '16 at 04:19
How to do when more than 2 images nearby? – JWC May Jan 12 '18 at 14:12
`text-align` applies to the contents of a block. Thus setting it on the `img` itself has no effect (if text could be added inside an ``, then that text would be centered). I would edit this answer but I have little to no faith in the stackoverflow moderation system at this point. Thus, applying a text-align to the parent block of any number of ``s will center them: https://jsfiddle.net/f4v1aLe0/ – mxcl Aug 09 '21 at 12:32

score 123 · Answer 2 · answered Aug 14 '11 at 06:24

123

That doesn't always work... if it doesn't, try:

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

answered Aug 14 '11 at 06:24

codecraftnap

1,543
2
9
9

score 93 · Answer 3 · edited Sep 12 '19 at 21:46

93

I came across this post, and it worked for me:

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(Vertical and horizontal alignment)

edited Sep 12 '19 at 21:46

Peter Mortensen

30,030
21
100
124

answered May 22 '12 at 14:28

Shai Reznik - HiRez.io

8,178
2
32
33

EssamSoft · Answer 4 · 2021-07-16T07:53:00.083

52

Not recommendad:

Another way of doing it would be centering an enclosing paragraph:

<p style="text-align:center"><img src="https://via.placeholder.com/300"></p>

Update:

My answer above is correct if you want to start learning HTML/CSS, but it doesn't follow best practices

edited Jul 16 '21 at 07:53

answered Jan 20 '13 at 12:32

EssamSoft

696
6
13

22

I would disagree, I think this does answer the question. The OP asked whether or not the property `text-align: center` is a good way to center an image, and _did not specify_ that the property had to be a part of the img tag. This answer uses the property in question in an effort to provide a solution (that does work). – MandM Mar 19 '13 at 22:19
2

This worked for me when display:block, etc. would not. – matthewsheets Aug 27 '15 at 20:35

score 16 · Answer 5 · edited May 22 '17 at 20:03

16

Actually, the only problem with your code is that the text-align attribute applies to text (yes, images count as text) inside of the tag. You would want to put a span tag around the image and set its style to text-align: center, as so:

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

The image will be centered. In response to your question, it is the easiest and most foolproof way to center images, as long as you remember to apply the rule to the image's containing span (or div).

edited May 22 '17 at 20:03

Web_Designer

68,768
89
200
259

answered Oct 18 '12 at 00:40

Code Monkey

869
3
11
27

2

A `span` element is `display: inline;` by default, so this runs into the same problem as placing `text-align: center;` on the `img` itself. You must set the `span` to `display: block;` or replace it with a `div` for this to work. – Web_Designer May 22 '17 at 20:05

Dimitris Maniatis · Answer 6 · 2015-08-10T09:01:34.973

14

You can do:

<center><img src="..." /></center>

edited Aug 10 '15 at 09:01

answered Aug 10 '15 at 08:42

Dimitris Maniatis

185
1
4

11

unfortunately, `` is not supported in html5, but damn, it works. – Ayrat Oct 11 '15 at 12:58

score 12 · Answer 7 · edited Sep 12 '19 at 21:59

There are three methods for centering an element that I can suggest:

Using the text-align property

    .parent {
    text-align: center;
}

    <div class="parent">
    <img src="https://placehold.it/60/60" />
</div>

Using the margin property

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

<img src="https://placehold.it/60/60" />

Using the position property

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="https://placehold.it/60/60" />
</div>

The first and second methods only work if the parent is at least as wide as the image. When the image is wider than its parent, the image will not stay centered!!!

But: The third method is a good way for that!

Here's an example:

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

#3 is so precise that I've been able to center an `img` inside a justified `div` in a `WebView` with CSS injection. Thank you! — JorgeAmVF, Nov 16 '18 at 22:19

score 10 · Answer 8 · edited Sep 12 '19 at 22:03

10

On the container holding image you can use a CSS 3 Flexbox to perfectly center the image inside, both vertically and horizontally.

Let's assume you have <div class="container"> as the image holder:

Then as CSS you have to use:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

And this will make all your content inside this div perfectly centered.

edited Sep 12 '19 at 22:03

Peter Mortensen

30,030
21
100
124

answered Dec 06 '16 at 09:42

Santoni

154
1
3

whate in the justify-content can use for set align in
??
– Manjitha Teshara Sep 08 '18 at 09:54
This is what I wanted. Thank you. – Dionne Kim Dec 13 '19 at 17:04

score 9 · Answer 9 · edited Sep 12 '19 at 21:45

Only if you need to support ancient versions of Internet Explorer.

The modern approach is to do margin: 0 auto in your CSS.

Example here: http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

p.pic {
    width: 48px;
    margin: 0 auto;
}

The only issue here is that the width of the paragraph must be the same as the width of the image. If you don't put a width on the paragraph, it will not work, because it will assume 100% and your image will be aligned left, unless of course you use text-align:center.

Try out the fiddle and experiment with it if you like.

score 6 · Answer 10 · edited Sep 12 '19 at 21:54

6

If you are using a class with an image then the following will do

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

If it is only an image in a specific class that you want to center align then following will do:

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

edited Sep 12 '19 at 21:54

Peter Mortensen

30,030
21
100
124

answered May 18 '13 at 06:26

Shairyar

3,168
5
42
83

I'd change the bottom one to be `img.class` or add an `img.class` version too. Thx for this. – Chuck Savage Dec 15 '15 at 19:32

score 6 · Answer 11 · edited Mar 15 '18 at 22:22

6

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

edited Mar 15 '18 at 22:22

sg7

5,668
2
31
39

answered Aug 19 '16 at 09:36

ADH - THE TECHIE GUY

3,602
2
27
53

1

dream hunter, if you are proposing an alternative way of centering an image using css, then you need to expand your question a bit. You could explain how and why this proposed alternative would be a better way to achieve the questioner's goal, perhaps including a link to the relevant documentation. That would make it more useful to them, and also more useful to other site readers who are looking for solutions to similar problems. – Vince Bowdren Aug 19 '16 at 15:59

score 5 · Answer 12 · edited Feb 22 '20 at 17:17

5

The simplest solution I found was to add this to my img-element:

style="display:block;margin:auto;"

It seems I don't need to add "0" before the "auto" as suggested by others. Maybe that is the proper way, but it works well enough for my purposes without the "0" as well. At least on latest Firefox, Chrome, and Edge.

edited Feb 22 '20 at 17:17

evandrix

5,889
4
26
35

answered Nov 12 '18 at 21:09

Panu Logic

1,839
1
15
21

only auto mean `auto auto auto auto` and `0 auto` means `0 auto 0 auto` ... and by default auto for bottom and top margin is `0` so adding 0 or not is exactly the same in this case which make you answer a nth-duplicate of ones already provided – Temani Afif Nov 12 '18 at 21:13
Your comment explains why it works. Great. But which of the previous answers said plain 'auto' without '0' works as well? Is that fact not worth mentioning? – Panu Logic Nov 13 '18 at 19:52
in this case it should be a comment, because in this particular case both are the same. I don't think we should have an answer for all the equivalent values,in this case we can write : `auto`, `auto auto`, `auto auto auto`, `auto auto auto auto`, `0 auto 0`, `0 auto`, `0 auto 0 auto`, and so on ... you think each one deserve a different answer? I don't think so. – Temani Afif Nov 13 '18 at 19:55
I would not say that if two different segments of CSS produce the same end-result, those two CSS-segments "are the same". Their output is the same but their source-code is not the same. Just like in general you can write any number of different programs that produce the same output. Then it is valuable to know (and tell people who ask) which of such "equivalent" programs seems to be the simplest and shortest to write. – Panu Logic Nov 15 '18 at 01:22
and all this should be written within one answer. That's why this answer is more suitable as a comment than a whole new answer. We should present all the equivalent things together and not make them separate feature which may sound that they are completely different because isn't the case [my opinion btw, no need to agree with it or argue the opposite]. And I am not talking about different programs that produce the same output, it's a complete different thing as the logic may not be the same. Here we are talking about the same property and the same value (like `i++` are the same as `i+=1`) – Temani Afif Nov 15 '18 at 01:28

score 4 · Answer 13 · edited Sep 12 '19 at 21:47

4

Simply change parent align :)

Try this one on parent properties:

text-align:center

edited Sep 12 '19 at 21:47

Peter Mortensen

30,030
21
100
124

answered Mar 17 '13 at 21:37

Mo.

23,921
35
145
210

score 3 · Answer 14 · edited Sep 12 '19 at 21:55

3

You can use text-align: center on the parent and change the img to display: inline-block → it therefore behaves like a text-element and is will be centered if the parent has a width!

img {
    display: inline-block
}

edited Sep 12 '19 at 21:55

Peter Mortensen

30,030
21
100
124

answered Apr 29 '15 at 07:25

Doml The-Bread

1,715
1
10
16

score 3 · Answer 15 · edited Sep 12 '19 at 22:01

To center a non background image depends on whether you want to display the image as an inline (default behavior) or a block element.

Case of inline

If you want to keep the default behavior of the image's display CSS property, you will need to wrap your image inside another block element to which you must set text-align: center;

Case of block

If you want to consider the image as a block element of its own, then text-align property does not make a sens, and you should do this instead:

IMG.display {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

The answer to your question:

Is the property text-align: center; a good way to center an image using CSS?

Yes and no.

Yes, if the image is the only element inside its wrapper.
No, in case you have other elements inside the image's wrapper because all the children elements which are siblings of the image will inherit the text-align property: and may be you would not like this side effect.

References

score 3 · Answer 16 · answered Mar 29 '20 at 08:37

3

.img-container {
  display: flex;
}

img {
  margin: auto;
}

this will make the image center in both vertically and horizontally

answered Mar 29 '20 at 08:37

Hyperx837

598
2
12

score 2 · Answer 17 · edited Sep 12 '19 at 22:00

2

If you want to set the image as the background, I've got a solution:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

edited Sep 12 '19 at 22:00

Peter Mortensen

30,030
21
100
124

answered Sep 05 '16 at 18:42

Wojciechu

2,656
1
13
10

score 2 · Answer 18 · answered Mar 14 '17 at 11:15

2

I would use a div to center align an image. As in:

<div align="center"><img src="your_image_source"/></div>

answered Mar 14 '17 at 11:15

Rotimi

4,710
4
17
27

score 1 · Answer 19 · edited Sep 12 '19 at 21:55

1

One more way to scale - display it:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

edited Sep 12 '19 at 21:55

Peter Mortensen

30,030
21
100
124

answered Jun 26 '15 at 09:21

Kishore Banala

876
1
8
12

score 1 · Answer 20 · edited Sep 12 '19 at 21:56

1

Use this to your img CSS:

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

edited Sep 12 '19 at 21:56

Peter Mortensen

30,030
21
100
124

answered Nov 23 '15 at 17:33

treb

383
1
5
15

score 1 · Answer 21 · answered May 27 '21 at 08:30

1

Use Grids To Stack images. It is very easy here is the code

.grid {
   display:grid;
}

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

answered May 27 '21 at 08:30

Ranger

96
1
2

OverCoder · Answer 22 · 2016-09-28T12:26:59.943

0

display: block with margin: 0 didn't work for me, neither wrapping with a text-align: center element.

This is my solution:

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

translateX is supported by most browsers

edited Sep 28 '16 at 12:26

answered Apr 25 '16 at 13:32

OverCoder

1,332
21
33

1

did you mean `margin: 0 auto;`? The key is setting `margin-left` and `margin-right` to `auto`. `margin: 0 auto;` is just a shortcut for that. – Web_Designer Apr 25 '16 at 19:49
1

@Web_Designer I tried `margin: 0 auto`, `margin: 0`, and `margin: auto`, none worked. Note that in Chrome's inspector, when using `margin: 0 auto`, is strikes the property with an exclamation mark saying `invalid property value` (or whatever that means that) – OverCoder Apr 25 '16 at 20:03
I think you meant "position: absolute;" instead of "display: absolute;" – WebDevDaniel Sep 26 '16 at 15:37
Thanks @WebDevDaniel for pointing out the typo. Oh any by the way, you might want to use `relative` positioning rather than `absolute`, both work pretty well. – OverCoder Sep 28 '16 at 12:28

score 0 · Answer 23 · answered Jul 06 '17 at 15:54

I discovered that if I have an image and some text inside a div, then I can use text-align:center to align the text and the image in one swoop.

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

score 0 · Answer 24 · edited Sep 12 '19 at 22:08

Sometimes we directly add the content and images on the WordPress administrator inside the pages. When we insert the images inside the content and want to align that center. Code is displayed as:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

In that case you can add CSS content like this:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

score 0 · Answer 25 · edited Sep 12 '19 at 22:11

0

Use:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

I think this is the way to center an image in the Laravel framework.

edited Sep 12 '19 at 22:11

Peter Mortensen

30,030
21
100
124

answered Sep 08 '18 at 09:48

Manjitha Teshara

522
1
8
20

score 0 · Answer 26 · answered Dec 25 '20 at 15:09

0

To center an image with CSS.

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

You can learn more here

answered Dec 25 '20 at 15:09

Murad

883
10
10

score 0 · Answer 27 · answered May 02 '22 at 19:02

0

If you want to center image to the center both vertically and horizontaly, regardless of screen size, you can try out this code

img{
   display: flex;
   justify-content:center;
   align-items: center;
   height: 100vh;
}

answered May 02 '22 at 19:02

Alijon Jumanazarov

185
1
9

Center image using text-align center?

27 Answers27

Not recommendad:

Update:

Linked

Related