571

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

img {
    text-align: center;
}
1

28 Answers 28

1172

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>

3
  • 8
    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? Feb 28, 2013 at 4: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 5, 2013 at 12:59
  • How to do when more than 2 images nearby?
    – JWC May
    Jan 12, 2018 at 14:12
124

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

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

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)

0
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

2
  • 23
    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, 2013 at 22:19
  • 2
    This worked for me when display:block, etc. would not. Aug 27, 2015 at 20:35
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).

1
  • 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. May 22, 2017 at 20:05
14

You can do:

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

1
  • 11
    unfortunately, <center> is not supported in html5, but damn, it works.
    – Ayrat
    Oct 11, 2015 at 12:58
12

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

  1. Using the text-align property

        .parent {
        text-align: center;
    }
        <div class="parent">
        <img src="https://placehold.it/60/60" />
    </div>

  2. Using the margin property

    img {
        display: block;
        margin: 0 auto;
    }
    <img src="https://placehold.it/60/60" />

  3. 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>

0
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.

0
9

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.

6
img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }
0
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;
}
1
  • I'd change the bottom one to be img.class or add an img.class version too. Thx for this. Dec 15, 2015 at 19:32
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.

4
  • 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 Nov 12, 2018 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, 2018 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. Nov 13, 2018 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, 2018 at 1:22
4

Simply change parent align :)

Try this one on parent properties:

text-align:center
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
}
3

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

  1. List of inline elements
  2. Centering things
3
.img-container {
  display: flex;
}

img {
  margin: auto;
}

this will make the image center in both vertically and horizontally

2

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

<div align="center"><img src="your_image_source"/></div>
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;
}
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 */
}
1

Use this to your img CSS:

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

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

.grid {
   display:grid;
}

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

If your img element is inside a div, which is itself inside another div whose display has been set as flexbox, as in my case here: (HTML)

<nav class="header">
            <div class="image">
                <img
                src=troll
                alt="trollface"
                ></img>
            </div>
            <div class="title">
                Meme Generator
            </div>
            <div class="subtitle">
                React Course - Project 3
            </div>
        </nav>

(CSS)

.header{
    display: flex;
}

.image{
    width: 5%;
    height: 100%;
}

.image > img{
    width: 100%;
}

You could set your .image div to align itself vertically by doing this:

.image{
    width: 5%;
    height: 100%;
    align-self: center;
}
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

4
  • 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. Apr 25, 2016 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, 2016 at 20:03
  • I think you meant "position: absolute;" instead of "display: absolute;" Sep 26, 2016 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, 2016 at 12:28
0

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

0

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

0

To center an image with CSS.

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

You can learn more here

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.